/* <!--=================
        MAIN STYLES 
    ================--> */

.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

 .hero-slide {
     transition: opacity 0.7s ease-in-out;
 }

 .masonry-grid {
     column-count: 1;
     column-gap: 1rem;
 }

 @media (min-width: 640px) {
     .masonry-grid {
         column-count: 2;
     }
 }

 @media (min-width: 1024px) {
     .masonry-grid {
         column-count: 3;
     }
 }

 .masonry-item {
     break-inside: avoid;
     margin-bottom: 1rem;
 }

 /* Hide scrollbar for tabs */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
 }

 .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }

 /* Reveal Animation Classes */
 .reveal {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s ease-out;
 }

 .reveal.active {
     opacity: 1;
     transform: translateY(0);
 }

#mobile-menu {
    transition: transform 0.3s ease;
}

.mobile-drawer-view {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    height: calc(100% - 65px);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateX(24px);
    transition: transform 0.28s ease, opacity 0.22s ease;
}

.mobile-drawer-view.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

#mainView.mobile-drawer-view {
    transform: translateX(-24px);
}

#mainView.mobile-drawer-view.is-active {
    transform: translateX(0);
}