.loading-spinner {
     border: 3px solid rgba(255, 255, 255, 0.1);
     border-top: 3px solid #eb0028;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: none;
     z-index: 10;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .page-bg-image {
     position: fixed;
     inset: 0;
     background-image: url('https://cdn.jsdelivr.net/gh/tedx-blip/Team-Repo@main/assets/gallerybkg.jpg');
     background-size: cover;
     background-position: center;
     filter: brightness(0.35) contrast(1.15);
     z-index: -10;
     pointer-events: none;
 }

 .bg-overlay-vignette {
     position: fixed;
     inset: 0;
     background: radial-gradient(circle at center, transparent 20%, rgba(0, 0, 0, 0.6) 100%);
     z-index: -9;
     pointer-events: none;
 }

 .bg-grid {
     position: fixed;
     inset: 0;
     background-image:
         linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
         linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 80px 80px;
     mask-image: radial-gradient(circle at center, black, transparent 90%);
     z-index: -8;
 }

 .scatter-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     padding: 1rem;
 }

 .photo-print {
     position: relative;
     background: #fdfdfd;
     padding: 10px 10px 48px 10px;
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
     cursor: pointer;
     width: 100%;
     max-width: 320px;
     margin: auto;
     border: 1px solid rgba(0, 0, 0, 0.2);
 }

 @media (min-width: 768px) {
     .scatter-container {
         gap: 5rem;
         padding: 2rem;
     }

     .photo-print:nth-child(odd) {
         transform: rotate(-3deg) translateY(20px);
     }

     .photo-print:nth-child(even) {
         transform: rotate(2deg) translateX(15px);
     }

     .photo-print:nth-child(3n) {
         transform: rotate(1.5deg) translateY(-10px);
     }
 }

 .photo-print:hover {
     transform: rotate(0deg) scale(1.08) translateY(-15px) !important;
     z-index: 50;
     box-shadow: 0 45px 90px rgba(235, 0, 40, 0.3);
     border-color: #eb0028;
 }

 .photo-print img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
 }

 .album-label {
     position: absolute;
     bottom: 15px;
     left: 0;
     width: 100%;
     text-align: center;
     font-family: 'Share Tech Mono', monospace;
     font-size: 10px;
     color: #111;
     text-transform: uppercase;
     letter-spacing: 0.3em;
 }

 /* Hero Team Styling */
 .team-hero {
     max-width: 1000px;
     margin: 0 auto 5rem auto;
     position: relative;
 }

 .team-frame {
     background: #fdfdfd;
     padding: 12px 12px 60px 12px;
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: transform 0.5s ease;
 }

 #lightbox {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.98);
     z-index: 9999;
     backdrop-filter: blur(20px);
 }

 .dynamic-frame {
     position: relative;
     display: inline-block;
     max-width: 90vw;
     max-height: 80vh;
     background: #111;
     padding: 8px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 #main-image {
     display: block;
     max-width: 100%;
     max-height: 70vh;
     width: auto;
     height: auto;
     object-fit: contain;
 }

 .nav-arrow {
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     color: white;
     cursor: pointer;
 }

 .nav-arrow:hover {
     background: #eb0028;
     transform: scale(1.1);
 }