:root { --primary-color: #337ab7;
 --secondary-color: #286090;
 --light-bg: #f5f5f5;
 --card-shadow: 0 2px 5px rgba(0,0,0,0.1);
 --card-hover-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.filter-buttons {margin-top: 20px;margin-bottom: 20px;}
.bna-filter {margin: 1px;border-radius: 3px;transition: all 0.5s;background-color: #fff; color:#1a1f37; font-weight:400; text-transform:capitalize;border: 1px solid #ccc;font-family: 'Afacad Flux',  sans-serif;}
.bna-filter:hover, .bna-filter.active {background-color: #337ab7;color: white;}
.figl-item {margin-bottom: 20px;transition: all 0.3s ease;border-radius: 4px;overflow: hidden;box-shadow: var(--card-shadow);background-color: #fff;}
.figl-item {animation-fill-mode: both;}
.figl-item:hover {transform: translateY(-2px);box-shadow: var(--card-hover-shadow);}
.figl-img {width: 100%;height: 185px;object-fit: cover;cursor: pointer;display: block; border: 4px solid #ffffff;}
.img-info {padding: 5px 10px;}
.img-category {display: inline-block;padding: 2px 4px;border-radius: 3px;font-size: 12px;margin-bottom: 5px;background-color: var(--light-bg);color: #333;}
.img-info h5 {margin-top: 0;margin-bottom: 2px;font-weight: bold;font-family: 'Afacad Flux', Geneva, sans-serif;}
.img-info p {color: #777;font-size: 13px;margin-bottom: 0;font-family: 'Dosis', Geneva, sans-serif;}
.lightbox-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);z-index: 1050;display: none;justify-content: center;align-items: center;opacity: 0;transition: opacity 0.3s ease;}
.lightbox-overlay.active {opacity: 1;}
.lightbox-container {max-width: 95%;max-height: 95%;position: relative;transform: scale(0.5);opacity: 0;transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;}
.lightbox-overlay.active .lightbox-container {transform: scale(1);opacity: 1;}
.lightbox-img {max-width: 100%;max-height: 80vh;border-radius: 4px;display: block;}
.lightbox-caption {color: white;text-align: center;padding: 15px 0;font-size: 16px;}
.close-lightbox {position: absolute;top: -40px;right: 0;color: white;background: none;border: none;font-size: 30px;cursor: pointer;opacity: 0.8;}
.close-lightbox:hover {opacity: 1;}
.nav-lightbox {position: absolute;top: 50%;transform: translateY(-50%);color: white;background: rgba(255, 255, 255, 0.2);justify-content: center;opacity: 0.7;
border: none;width: 50px;height: 50px;border-radius: 50%;font-size: 24px;cursor: pointer;display: flex;align-items: center;}
.nav-lightbox:hover {background: rgba(255, 255, 255, 0.3);opacity: 1;}
.prev-lightbox {left: -70px;}
.next-lightbox {right: -70px;}
.figl-item.has-link .figl-img {cursor: pointer;}
.link-icon:hover {background: white;color: var(--primary-color);}
.card {margin-top: 30px;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0 1px 1px rgba(0, 0, 0, .05);}
.card-body {padding: 15px;}
.card-title {margin-top: 0;margin-bottom: 10px;font-size: 18px;font-weight: bold;}
 @media (max-width: 768px) {
.top-banner .content {padding-top: 80px;text-align: center;}
.top-banner .content .title {font-size: 24px;}
.nav-lightbox {width: 40px;height: 40px;font-size: 20px;}
.prev-lightbox {left: 10px;}
.next-lightbox {right: 10px;}
.close-lightbox {top: -50px;right: 10px;}
.col-md-6, .col-lg-4, .col-xl-3 {position: relative;min-height: 1px;padding-left: 15px;padding-right: 15px;}
 @media (min-width: 992px) {.col-md-6 {width: 50%;}}
 @media (min-width: 1200px) {.col-md-6 {width: 25%;float: left;}}
.row {margin-left: -15px;margin-right: -15px;}
.row:before, .row:after {content: " ";display: table;}
.row:after {clear: both;}