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

   html {
       scroll-behavior: smooth
   }

   body {
       font-family: 'Poppins', sans-serif;
       overflow-x: hidden
   }

   .preloader {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, #0F766E, #14B8A6);
       z-index: 99999;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       transition: opacity .5s, visibility .5s
   }

   .preloader.hidden {
       opacity: 0;
       visibility: hidden
   }

   .preloader-plane {
       animation: flyPlane 2s ease-in-out infinite
   }

   @keyframes flyPlane {

       0%,
       100% {
           transform: translateX(0) translateY(0)
       }

       25% {
           transform: translateX(20px) translateY(-10px) rotate(5deg)
       }

       50% {
           transform: translateX(0) translateY(-20px)
       }

       75% {
           transform: translateX(-20px) translateY(-10px) rotate(-5deg)
       }
   }

   .preloader-text {
       color: white;
       font-size: 1.5rem;
       font-weight: 700;
       font-family: 'Playfair Display', serif;
       letter-spacing: 3px;
       margin-top: 15px
   }

   .preloader-dots span {
       display: inline-block;
       width: 8px;
       height: 8px;
       background: white;
       border-radius: 50%;
       margin: 0 4px;
       animation: dotBounce 1.4s ease-in-out infinite
   }

   .preloader-dots span:nth-child(2) {
       animation-delay: .2s
   }

   .preloader-dots span:nth-child(3) {
       animation-delay: .4s
   }

   @keyframes dotBounce {

       0%,
       80%,
       100% {
           transform: scale(.6);
           opacity: .5
       }

       40% {
           transform: scale(1);
           opacity: 1
       }
   }

   ::-webkit-scrollbar {
       width: 8px
   }

   ::-webkit-scrollbar-track {
       background: #f1f1f1
   }

   ::-webkit-scrollbar-thumb {
       background: #0F766E;
       border-radius: 10px
   }

   .navbar-scrolled {
       background: rgba(255, 255, 255, .98) !important;
       box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
       backdrop-filter: blur(20px)
   }

   .navbar-scrolled .nav-link {
       color: #1E293B !important
   }

   .navbar-scrolled .nav-logo {
       color: #0F766E !important
   }

   .navbar-scrolled .nav-cta {
       background: #0F766E !important;
       color: white !important
   }

   .navbar-scrolled .menu-icon {
       color: #1E293B !important
   }

   .mobile-menu {
       transform: translateX(100%);
       transition: transform .3s cubic-bezier(.4, 0, .2, 1)
   }

   .mobile-menu.active {
       transform: translateX(0)
   }

   .mobile-overlay {
       opacity: 0;
       visibility: hidden;
       transition: all .3s
   }

   .mobile-overlay.active {
       opacity: 1;
       visibility: visible
   }

   .dropdown-menu {
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: all .3s
   }

   .dropdown:hover .dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateY(0)
   }

   .page-hero-overlay {
       background: linear-gradient(135deg, rgba(15, 118, 110, .85), rgba(30, 41, 59, .8))
   }

   .breadcrumb-item+.breadcrumb-item::before {
       content: '';
       display: inline-block;
       width: 4px;
       height: 4px;
       background: rgba(255, 255, 255, .5);
       border-radius: 50%;
       margin: 0 10px;
       vertical-align: middle
   }

   /* Filter Tab */
   .filter-tab {
       transition: all .3s;
       cursor: pointer
   }

   .filter-tab.active {
       background: #0F766E;
       color: white;
       border-color: #0F766E;
       box-shadow: 0 4px 15px rgba(15, 118, 110, .3)
   }

   /* Masonry Grid */
   .masonry-grid {
       column-count: 3;
       column-gap: 16px
   }

   @media(max-width:1024px) {
       .masonry-grid {
           column-count: 2
       }
   }

   @media(max-width:640px) {
       .masonry-grid {
           column-count: 1;
           column-gap: 12px
       }
   }

   .masonry-item {
       break-inside: avoid;
       margin-bottom: 16px;
       border-radius: 16px;
       overflow: hidden;
       position: relative;
       cursor: pointer;
       transition: all .4s ease
   }

   .masonry-item:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .2)
   }

   .masonry-item img {
       width: 100%;
       display: block;
       transition: transform .6s ease
   }

   .masonry-item:hover img {
       transform: scale(1.08)
   }

   .masonry-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, transparent 60%);
       opacity: 0;
       transition: opacity .3s ease;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       padding: 20px
   }

   .masonry-item:hover .masonry-overlay {
       opacity: 1
   }

   .masonry-top-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       padding: 12px;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       opacity: 0;
       transition: opacity .3s
   }

   .masonry-item:hover .masonry-top-overlay {
       opacity: 1
   }

   /* Lightbox */
   .lightbox {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, .95);
       z-index: 5000;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       visibility: hidden;
       transition: all .3s
   }

   .lightbox.active {
       opacity: 1;
       visibility: visible
   }

   .lightbox-img {
       max-width: 90%;
       max-height: 80vh;
       border-radius: 12px;
       object-fit: contain;
       transition: transform .3s
   }

   .lightbox-info {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 20px 30px;
       background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent)
   }

   /* Like animation */
   @keyframes heartPop {
       0% {
           transform: scale(1)
       }

       50% {
           transform: scale(1.3)
       }

       100% {
           transform: scale(1)
       }
   }

   .heart-pop {
       animation: heartPop .3s ease
   }

   /* Load More */
   .load-more-spinner {
       display: none
   }

   .loading .load-more-spinner {
       display: block
   }

   .loading .load-more-text {
       display: none
   }

   .btn-primary {
       position: relative;
       overflow: hidden;
       transition: all .3s
   }

   .btn-primary::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
       transition: left .5s
   }

   .btn-primary:hover::before {
       left: 100%
   }

   .back-to-top {
       opacity: 0;
       visibility: hidden;
       transition: all .3s
   }

   .back-to-top.visible {
       opacity: 1;
       visibility: visible
   }

   /* Stats */
   .gallery-stat {
       transition: all .3s
   }

   .gallery-stat:hover {
       transform: scale(1.05)
   }

   /* View Toggle */
   .view-btn.active {
       background: #0F766E;
       color: white
   }

   /* Grid View */
   .grid-view {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px
   }

   @media(max-width:1024px) {
       .grid-view {
           grid-template-columns: repeat(2, 1fr)
       }
   }

   @media(max-width:640px) {
       .grid-view {
           grid-template-columns: 1fr
       }
   }

   .grid-item {
       border-radius: 16px;
       overflow: hidden;
       position: relative;
       cursor: pointer;
       aspect-ratio: 4/3;
       transition: all .4s ease
   }

   .grid-item:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .2)
   }

   .grid-item img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .6s ease
   }

   .grid-item:hover img {
       transform: scale(1.08)
   }