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

/* Static background elements */
.background-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bg-disk {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.3);
    border: 5px solid #ff0000;
}

.bg-disk.top-right {
    width: 140vw;
    height: 140vw;
    top: -70vw;
    right: -70vw;
    opacity: 0.8;
}

.bg-disk.bottom-left {
    width: 130vw;
    height: 130vw;
    bottom: -65vw;
    left: -65vw;
    opacity: 0.8;
}

.vertical-line {
    position: absolute;
    width: 5px;
    height: 70vh;
    background: #00ff00;
    opacity: 1;
}

.vertical-line.left {
    left: 17%;
    top: 20%;
    height: 60vh;
    opacity: 0.7;
}

.vertical-line.right {
    right: 32%;
    top: 15%;
    height: 70vh;
    opacity: 0.8;
}

.star {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(130, 177, 255, 0.5);
    box-shadow: 0 0 5px rgba(130, 177, 255, 0.8);
    opacity: 0.7;
    /* Make stars slightly more transparent overall */
}

.star1 {
    right: 25%;
    top: 23%;
    width: 3px;
    height: 3px;
    background-color: rgba(112, 219, 219, 0.7);
    box-shadow: 0 0 4px rgba(112, 219, 219, 0.9);
}

.star2 {
    left: 28%;
    bottom: 38%;
    width: 2px;
    height: 2px;
    background-color: rgba(138, 80, 232, 0.7);
    box-shadow: 0 0 5px rgba(138, 80, 232, 0.9);
}

.star3 {
    right: 75%;
    top: 65%;
    width: 2px;
    height: 2px;
    background-color: rgba(70, 168, 200, 0.6);
    box-shadow: 0 0 4px rgba(70, 168, 200, 0.8);
}

/* Anti-banding technique using noise overlay */
.reduce-banding {
    position: relative;
}

.reduce-banding::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("noise.svg");
    background-repeat: repeat;
    opacity: 0.3;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* Base styles for html and body for smooth-scrollbar compatibility */
html {
    height: 100%;
    overflow: hidden;
    /* Prevent native scroll, smooth-scrollbar provides its own */
    scroll-behavior: smooth;
    background-color: #131419;
    /* Updated to the requested color */
}

body {
    height: 100%;
    /* Ensure body takes full height */
    font-family: 'Montserrat', sans-serif;
    background-color: transparent;
    /* Body itself needs to be transparent */
    color: #fff;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    /* Prevent native scroll, smooth-scrollbar provides its own */
}

/* New scroll container style */
#main-scroll-area {
    width: 100%;
    height: 100vh;
    /* Occupy full viewport height for scrolling */
    /* overflow: auto; smooth-scrollbar will handle actual scroll mechanism */
}

/* Portfolio Section Styling */
.portfolio-section {
    min-height: 100vh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 2rem 2rem 2rem;
    text-align: center;
}

.portfolio-indicator {
    width: 24px;
    height: 24px;
    background-color: transparent;
    /* Make center transparent */
    border: 6px solid #FFD700;
    /* Yellow border to create the ring */
    border-radius: 50%;
    margin-top: 4rem;
    /* Space above indicator */
    margin-bottom: 8rem;
    /* Space below indicator */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-indicator:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.portfolio-image-mask {
    width: 100%;
    /* Adjust percentage for responsiveness */
    max-width: 1440px;
    /* Max width for very large screens */
    aspect-ratio: 1443.999402 / 463.528267;
    /* Match true SVG path extent aspect ratio */
    /* border-radius: 200px; */
    /* Replaced by clip-path */
    overflow: hidden;
    margin-bottom: 2.5rem;
    /* Space below image */
    /* box-shadow: 0 8px 25px rgba(0,0,0,0.25); */
    /* Replaced by filter for conforming shadow */
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
    /* Shadow that conforms to clip-path */
    clip-path: url(#goggleClipPath);
}

.portfolio-image-mask video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    /* Align to top by default */
    transform: scale(3);
    /* Zoomed in by default (300% zoom) */
    transition: transform 0.4s ease-out, object-position 0.4s ease-out;
    /* Smooth transition */
}

.portfolio-image-mask:hover video {
    transform: scale(1);
    /* Zoom out to normal size on hover */
    object-position: center;
    /* Re-center on hover */
}

.see-work-button {
    background-color: #E0E0E0;
    color: #1A1B1F;
    /* Dark text to match new section background */
    padding: 0.6rem 2rem;
    /* Reduced padding */
    border-radius: 50px;
    /* Keep the pill shape */
    text-decoration: none;
    font-weight: 600;
    /* Increased font weight for thicker text */
    font-size: 0.8rem;
    /* Further reduced font size */
    margin-bottom: 12rem;
    /* Keep existing margin for now */
    transition: background-color 0.3s, color 0.3s;
    display: inline-block;
    /* Ensure padding and margins work as expected */
}

.see-work-button:hover {
    background-color: #cccccc;
    transform: translateY(-2px);
}

.social-icons {
    display: flex;
    gap: 20px;
    /* Spacing between icons */
    margin-bottom: 2rem;
    /* Space below icons */
}

.social-icon {
    width: 38px;
    height: 38px;
    background-color: #5a5b5e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.social-icon i {
    font-size: 18px;
    color: #131419;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    background-color: #ffffff;
    /* Background becomes white on hover */
}

.social-icon:hover i {
    transform: scale(1.4);
    /* Icon scales up on hover */
}

/* Basic placeholders - replace with actual SVG/Font icons */
.social-icon[aria-label="Twitter"]::before {
    content: 'T';
}

.social-icon[aria-label="YouTube"]::before {
    content: 'Y';
}

.social-icon[aria-label="Instagram"]::before {
    content: 'I';
}

.social-icon[aria-label="Behance"]::before {
    content: 'Bē';
}

.copyright-text {
    font-size: 0.8rem;
    color: #5D5E62;
    margin: 0;
    padding-top: 2rem;
}

/* Portfolio Footer */
.portfolio-footer {
    padding: 40px 20px 2rem 20px;
    text-align: center;
    margin-top: 0;
}

.portfolio-footer .social-icons {
    margin-bottom: 25px;
    margin-top: 44px;
    display: flex;
    justify-content: center;
}

.portfolio-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Hide scrollbar for WebKit browsers - This might be redundant now if html/body overflow is hidden */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
html,
body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

/* Common styles for both ::before and ::after pseudo-elements */
body::before,
body::after {
    content: '';
    position: fixed;
    /* Fixed to viewport */
    top: 0;
    left: 0;
    width: 100vw;
    /* Use viewport units */
    height: 100vh;
    /* Use viewport units */
    background-size: cover;
    background-position: center center;
    /* More explicit */
    background-repeat: no-repeat;
    /* Explicitly no repeat */
    opacity: 0;
    /* Both start transparent */
    transition: opacity 0.35s ease-in-out;
    /* FASTER DURATION - Was 0.7s */
    z-index: -1;
    /* Behind body's content, in front of html's background */
    /* Default to transparent gradient and no image URL initially */
    background-image: linear-gradient(180deg, hsla(242, 75%, 9%, 0.7) 0%, hsla(252, 56%, 11%, 0.7) 33%, hsla(263, 74%, 13%, 0.7) 67%, hsla(282, 82%, 12%, 0.7) 100%), none;
}

body::before {
    background-image: var(--gradient-overlay, linear-gradient(180deg, hsla(242, 75%, 9%, 0.7) 0%, hsla(252, 56%, 11%, 0.7) 33%, hsla(263, 74%, 13%, 0.7) 67%, hsla(282, 82%, 12%, 0.7) 100%)),
        var(--bg-image-before, none);
}

body::after {
    background-image: var(--gradient-overlay, linear-gradient(180deg, hsla(242, 75%, 9%, 0.7) 0%, hsla(252, 56%, 11%, 0.7) 33%, hsla(263, 74%, 13%, 0.7) 67%, hsla(282, 82%, 12%, 0.7) 100%)),
        var(--bg-image-after, none);
}

/* SERVICE HOVER BACKGROUND CONTAINERS: These elements show background images when hovering over service items.
   IMPLEMENTATION: Extended height to reach the curved divider position, applied serviceHoverMask clip-path.
   DEBUG: Red borders added to visualize mask alignment with the curved divider.
   GOAL: The bottom curve of this mask should perfectly overlap the existing curved-section-divider. 
   
   ADJUSTMENT VARIABLES for fine-tuning alignment:
   - Adjust transform: translateY() to move the entire mask up/down
   - Modify the SVG path coordinates in the HTML file
   */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Only cover hero section */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 0;
    pointer-events: none;
}

.hero-bg.before {
    background-image: var(--bg-image-before, none);
}

.hero-bg.after {
    background-image: var(--bg-image-after, none);
}

body.show-before .hero-bg.before,
body.show-after .hero-bg.after {
    opacity: 1;
}

.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 2rem;
    position: relative;
    z-index: 2;
    /* Above background images */
    overflow: hidden;
}

.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Match hero section height */
    z-index: 0;
    /* Behind gradient overlay */
    pointer-events: none;
    overflow: hidden;
    /* Contain within hero */
}

/* Full background container - matches test SVG dimensions exactly */
.full-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 180px);
    /* Exact same height as test SVG */
    z-index: 0;
    /* Above background but below content */
    pointer-events: none;
    overflow: hidden;
}

.full-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    clip-path: url(#serviceHoverMask);
    /* Apply the curve mask */
}

.full-bg.before {
    background-image: var(--bg-image-before, none);
}

.full-bg.after {
    background-image: var(--bg-image-after, none);
}

body.show-before .full-bg.before,
body.show-after .full-bg.after {
    opacity: 1;
}

/* Mask styles have been removed as requested */

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            hsla(242, 75%, 9%, 0.6) 0%,
            /* Original opacity */
            hsla(252, 56%, 11%, 0.6) 33%,
            hsla(263, 74%, 13%, 0.6) 67%,
            hsla(282, 82%, 12%, 0.6) 100%);
    z-index: 1;
    /* Above background images but below content */
    pointer-events: none;
}

/* Hero and divider container */
.hero-container {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    margin-bottom: 0;
    /* Ensure no gap */
}

/* Curved divider section */
.curved-section-divider {
    position: relative;
    width: 100%;
    height: 100px;
    /* Adjust based on your design */
    background: #0a0925;
    z-index: 2;
    margin-top: 0;
    /* Remove any gap */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.portfolio-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: #0a0925;
    /* Solid dark background for portfolio section */
    z-index: 2;
    /* Above the hero background */
    padding: 2rem;
    box-sizing: border-box;
    margin-top: -1px;
    /* Fix for any potential gap */
}

/* Common Logo Header Styles - Consistent across all pages */
.logo-header {
    display: flex;
    justify-content: center;
    padding: 3rem 20px 20px;
    /* 48px top padding for consistency */
    width: 100%;
    box-sizing: border-box;
}

.logo-header .logo {
    margin-bottom: 0;
}

.logo-header .logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
}

/* Override individual page headers to maintain consistency */
header {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
    /* Changed from 2rem to 3rem (48px) */
    position: relative;
    z-index: 10;
}

/* Override for index page header inside hero-section */
.hero-section header {
    padding-top: 1rem;
    /* Reduced from 3rem because hero-section already has 2rem padding */
}

.logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
    /* Ensure logo is fully opaque */
    position: relative;
    z-index: 10;
    /* Place logo above any overlays */
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    position: relative;
}

.services {
    display: flex;
    position: relative;
    z-index: 3;
    /* Ensure services are above the background */
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
}

.service-item {
    position: relative;
    padding: 0.5rem 1rem;
    font-weight: 300;
    letter-spacing: 5px;
    color: #C8BEDC;
    font-size: 1.5rem;
    transition: transform 0.3s ease-out, color 0.3s ease;
    opacity: 0.8;
    cursor: pointer;
}

.service-item:hover {
    transform: scale(1.05);
    opacity: 1;
    color: #FFFFFF;
    /* White text on hover */
}

.service-item::before,
.service-item::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(138, 80, 232, 0.3), transparent);
    top: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.service-item::before {
    left: 0;
}

.service-item::after {
    right: 0;
}

.service-item:hover::before,
.service-item:hover::after {
    opacity: 0;
    /* Keep borders hidden on hover */
}

.reel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 120px;
    /* Increased from 20px to move it up */
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 6s infinite;
    cursor: pointer;
    z-index: 10;
}

/* Keyframes for the reel section's bounce */
@keyframes bounce {

    0%,
    100% {
        /* Start and end of the full 6s cycle, and also the resting state after the quick bounce */
        transform: translateX(-50%) translateY(0);
    }

    8% {
        /* Peak of the quick bounce (0.08 * 6s = 0.48s into the animation) */
        transform: translateX(-50%) translateY(-10px);
        /* Adjust -10px for more/less bounce height */
    }

    16% {
        /* End of the quick bounce, back to rest (0.16 * 6s = 0.96s into the animation) */
        transform: translateX(-50%) translateY(0);
    }

    /* From 16% to 100%, it stays at translateY(0), creating the pause */
}

.reel-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    /* Reduced from 0.8rem */
    font-weight: 500;
    color: rgba(200, 190, 220, 0.7);
    /* Reduced from 0.85 opacity */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.reel-arrow {
    width: 30px;
    height: 20px;
    position: relative;
}

.reel-arrow::before,
.reel-arrow::after {
    content: '';
    position: absolute;
    width: 10px;
    /* Increased from 8px */
    height: 22px;
    /* Increased from 18px */
    background-color: #FFD89C;
    border-radius: 11px;
    /* Increased from 9px */
    bottom: 0;
}

.reel-arrow::before {
    left: 50%;
    transform: translateX(-100%) rotate(45deg);
    transform-origin: bottom right;
}

.reel-arrow::after {
    left: 50%;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}

footer {
    padding: 1rem 0;
    text-align: center;
    padding: 20px 0;
    position: relative;
    z-index: 100;
    /* Very high z-index to ensure it's above all overlays */
    opacity: 1 !important;
    /* Force full opacity */
}

footer a:hover,
footer .footer-link:hover,
footer .footer-item a:hover {
    color: #ffd89c !important;
    /* Desired hover color, made more assertive */
    transition: color 0.3s ease;
    /* Smooth transition for the color change */
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 5rem;
    opacity: 1 !important;
    /* Force navigation list to be fully opaque */
    position: relative;
    z-index: 101;
}

nav ul li a {
    color: #a0a0a0 !important;
    /* Force the exact color - no opacity */
    text-decoration: none;
    font-size: 0.9rem;
    /* Match gallery font size */
    letter-spacing: 2px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: 500 !important;
    /* Force the thickness */
    opacity: 1 !important;
    /* Force full opacity */
    position: relative;
    z-index: 101;
    /* Above footer */
}

nav ul li a:hover {
    color: #ffffff;
}

.blinking-star {
    position: relative;
    /* width & height will be set by size classes */
    /* background-color & box-shadow will be set by color+size classes */
    animation: blinkFade 3s infinite ease-in-out;
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

/* --- Star Color 1 (Cyan) --- */
.blinking-star.star-color-1.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(80, 200, 220, 0.8);
    box-shadow: 0 0 3px rgba(80, 200, 220, 0.7), 0 0 6px rgba(80, 200, 220, 0.5), 0 0 8px rgba(80, 200, 220, 0.3);
    /* Adjusted */
}

.blinking-star.star-color-1.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(80, 200, 220, 0.8);
    box-shadow: 0 0 4px rgba(80, 200, 220, 0.7), 0 0 8px rgba(80, 200, 220, 0.5), 0 0 12px rgba(80, 200, 220, 0.3);
    /* Adjusted */
}

.blinking-star.star-color-1.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(80, 200, 220, 0.8);
    box-shadow: 0 0 5px rgba(80, 200, 220, 0.7), 0 0 10px rgba(80, 200, 220, 0.5), 0 0 15px rgba(80, 200, 220, 0.3);
    /* Adjusted */
}

/* --- Star Color 2 (Bluish) --- */
.blinking-star.star-color-2.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(180, 180, 220, 0.7);
    box-shadow: 0 0 3px rgba(180, 180, 220, 0.6), 0 0 6px rgba(180, 180, 220, 0.4), 0 0 8px rgba(180, 180, 220, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-2.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(180, 180, 220, 0.7);
    box-shadow: 0 0 4px rgba(180, 180, 220, 0.6), 0 0 8px rgba(180, 180, 220, 0.4), 0 0 12px rgba(180, 180, 220, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-2.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(180, 180, 220, 0.7);
    box-shadow: 0 0 5px rgba(180, 180, 220, 0.6), 0 0 10px rgba(180, 180, 220, 0.4), 0 0 15px rgba(180, 180, 220, 0.2);
    /* Adjusted */
}

/* --- Star Color 3 (Yellowish) --- */
.blinking-star.star-color-3.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(230, 200, 120, 0.7);
    box-shadow: 0 0 3px rgba(230, 200, 120, 0.6), 0 0 6px rgba(230, 200, 120, 0.4), 0 0 8px rgba(230, 200, 120, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-3.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(230, 200, 120, 0.7);
    box-shadow: 0 0 4px rgba(230, 200, 120, 0.6), 0 0 8px rgba(230, 200, 120, 0.4), 0 0 12px rgba(230, 200, 120, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-3.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(230, 200, 120, 0.7);
    box-shadow: 0 0 5px rgba(230, 200, 120, 0.6), 0 0 10px rgba(230, 200, 120, 0.4), 0 0 15px rgba(230, 200, 120, 0.2);
    /* Adjusted */
}

/* --- Star Color 4 (Purplish-blue) --- */
.blinking-star.star-color-4.star-size-s {
    width: 7px;
    height: 7px;
    /* Was 10px */
    background-color: rgba(150, 170, 230, 0.7);
    box-shadow: 0 0 3px rgba(150, 170, 230, 0.6), 0 0 6px rgba(150, 170, 230, 0.4), 0 0 8px rgba(150, 170, 230, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-4.star-size-m {
    width: 10px;
    height: 10px;
    /* Was 15px */
    background-color: rgba(150, 170, 230, 0.7);
    box-shadow: 0 0 4px rgba(150, 170, 230, 0.6), 0 0 8px rgba(150, 170, 230, 0.4), 0 0 12px rgba(150, 170, 230, 0.2);
    /* Adjusted */
}

.blinking-star.star-color-4.star-size-l {
    width: 12px;
    height: 12px;
    /* Was 17px */
    background-color: rgba(150, 170, 230, 0.7);
    box-shadow: 0 0 5px rgba(150, 170, 230, 0.6), 0 0 10px rgba(150, 170, 230, 0.4), 0 0 15px rgba(150, 170, 230, 0.2);
    /* Adjusted */
}

/* Clean up old general color definitions if any remain that are not combined with size */
/* Ensure pseudo-element styles for cross shape are fully removed */
.blinking-star::before,
.blinking-star::after {
    content: '';
    /* Keep for potential future use, but not for shape now */
    position: absolute;
    /* Keep for potential future use */
}

/* --- Shooting Star --- */
/* Shooting Stars - Fixed Visibility & JS Ready */
.shooting-star {
    position: absolute;
    bottom: 0;
    /* background will be set by JS for dynamic gradients */
    transform-origin: bottom left;
    /* animation-name, animation-duration, animation-timing-function will be set by JS */
    animation-play-state: paused;
    opacity: 0;
    /* Start hidden, JS will make it appear */
    z-index: 5;
    /* Default dimensions - these will be overridden by specific classes */
    width: 100px;
    /* Default width */
    height: 1px;
    /* Default height */
    border-radius: 50%;
    /* Make it round */
}

.shooting-star::before {
    /* Head of the shooting star */
    content: '';
    position: absolute;
    top: 0;
    /* Aligns with the 'tip' of the tail */
    right: 0;
    /* Aligns with the 'tip' of the tail */
    width: 3px;
    /* Head width */
    height: 3px;
    /* Head height */
    background: rgba(255, 220, 100, 0.9);
    box-shadow: 0 0 10px rgba(255, 220, 100, 0.7);
    border-radius: 50%;
    /* Make it round */
}

/* Individual star SIZES and POSITIONS - Timing is handled by JS */
.shooting-star.star-main {
    /* width: 140px !important; -- JS will set this */
    /* height: 3px !important; -- JS will set this */
    left: 30%;
    /* Changed from 50% to avoid dead center */
}

.shooting-star.star-1 {
    /* width: 100px !important; -- JS will set this */
    /* height: 2.5px !important; -- JS will set this */
    left: 20%;
}

.shooting-star.star-2 {
    /* width: 80px !important; -- JS will set this */
    /* height: 2px !important; -- JS will set this */
    left: 70%;
}

.shooting-star.star-3 {
    /* width: 90px !important; -- JS will set this */
    /* height: 1.5px !important; -- JS will set this */
    left: 40%;
}

.shooting-star.star-4 {
    /* width: 70px !important; -- JS will set this */
    /* height: 1px !important; -- JS will set this */
    left: 85%;
}

@keyframes shoot-fast {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(-90deg) translateX(-50%);
    }

    10% {
        opacity: 0.7;
    }

    /* Quick appearance */
    70% {
        opacity: 0.7;
        transform: translateY(-80vh) rotate(-90deg) translateX(-50%);
    }

    /* Visible for a short while, partial travel */
    100% {
        opacity: 0;
        transform: translateY(-110vh) rotate(-90deg) translateX(-50%);
    }

    /* Fades out quickly, completes travel */
}

@keyframes shoot-medium {

    /* This was the original 'shoot' */
    0% {
        opacity: 0;
        transform: translateY(0) rotate(-90deg) translateX(-50%);
    }

    20% {
        opacity: 0.7;
    }

    /* Changed from 1 */
    80% {
        opacity: 0.7;
        transform: translateY(-90vh) rotate(-90deg) translateX(-50%);
    }

    /* Changed from 1 */
    100% {
        opacity: 0;
        transform: translateY(-110vh) rotate(-90deg) translateX(-50%);
    }
}

@keyframes shoot-slow {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(-90deg) translateX(-50%);
    }

    25% {
        opacity: 0.7;
    }

    /* Slower appearance */
    90% {
        opacity: 0.7;
        transform: translateY(-100vh) rotate(-90deg) translateX(-50%);
    }

    /* Stays visible longer, nearly full travel */
    100% {
        opacity: 0;
        transform: translateY(-110vh) rotate(-90deg) translateX(-50%);
    }

    /* Fades out at the very end */
}

@keyframes blinkFade {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* Simple bounce animation removed - using the one with translateX for reel section */

/* Commenting out original scroll indicator as it's being replaced */
/*
.scroll-indicator {
{{ ... */

/* Curved Section Divider Styling */
.curved-section-divider {
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg,
            hsla(282, 82%, 12%, 0.6) 0%,
            /* Starts with hero's bottom color */
            hsla(270, 60%, 15%, 0.65) 50%,
            /* Middle point: slightly more saturated and a bit lighter */
            hsla(265, 50%, 20%, 0.7) 100%
            /* End point: noticeably lighter and more purplish */
        );
    position: relative;
    clip-path: url(#heroDividerCurveClip);
    /* Has the curve shape */
    z-index: 1;
    /* Same level as hero section */
}

/*
.curved-section-divider::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #131419; 
    clip-path: ellipse(50% 270px at 50% 100%); 
    z-index: 1; 
}
*/

/* Portfolio Section */
.portfolio-section {
    min-height: 100vh;
    background-color: transparent;
    /* Changed to transparent */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content vertically, adjust with margins if needed */
    padding: 0.1rem 2rem 2rem 2rem;
    /* Inset content, further reduced top padding */
    text-align: center;
    /* Helps with centering some inline or inline-block elements */
    position: relative;
    /* Keep for child positioning or future pseudo-elements */
    /* z-index: 0; */
    /* Typically not needed unless specific stacking conflicts arise */
}

.portfolio-indicator {
    width: 24px;
    height: 24px;
    background-color: transparent;
    /* Make center transparent */
    border: 6px solid #FFD700;
    /* Yellow border to create the ring */
    border-radius: 50%;
    margin-bottom: 8rem;
    /* Space below indicator */
}

/* Gallery Page Specific Styles */

/* Gallery Header */
.gallery-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 20px 20px;
    /* Changed from 40px to 3rem (48px) for consistency */
    width: 100%;
    box-sizing: border-box;
}

.gallery-header .logo {
    margin-bottom: 10px;
    /* 10px space between logo and nav */
}

.gallery-header .logo img {
    height: 25px;
    /* Adjusted height for the 'O' logo version */
    width: auto;
}

.gallery-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 60px 0;
    /* 60px bottom margin only */
    display: flex;
    justify-content: center;
}

.gallery-nav li {
    margin: 0 20px;
    /* Spacing between nav items */
}

.gallery-nav a {
    text-decoration: none;
    color: rgba(160, 160, 160, 0.6);
    /* More transparent default color */
    font-size: 0.9rem;
    font-weight: 300;
    /* Thinner weight for non-active items */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.3s ease, font-weight 0.3s ease, opacity 0.3s ease;
}

.gallery-nav a:hover,
.gallery-nav a.active {
    color: #ffffff;
    /* Active/hover nav item color */
    font-weight: 500;
    /* Normal weight for active/hovered items */
}

/* Dynamic gallery nav styles */
.dynamic-gallery-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 60px 0;
    /* 60px bottom margin only */
    display: flex;
    justify-content: center;
}

.dynamic-gallery-nav li {
    margin: 0 20px;
    /* Spacing between nav items */
}

.dynamic-gallery-nav a {
    text-decoration: none !important;
    color: rgba(160, 160, 160, 0.6) !important;
    /* More transparent default color */
    font-size: 0.9rem !important;
    font-weight: 300 !important;
    /* Lighter weight for inactive nav items */
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease, font-weight 0.3s ease, opacity 0.3s ease, transform 0.2s ease !important;
}

.dynamic-gallery-nav a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    /* Hover color */
    font-weight: 400 !important;
    /* Slightly bolder on hover */
    transform: translateY(-1px) !important;
    /* Subtle lift effect */
}

.dynamic-gallery-nav a.active {
    color: #ffffff !important;
    /* Active color */
    font-weight: 700 !important;
    /* Bold for active item */
}

/* Gallery Container & Grid */
/* Gallery container styles */

.gallery-container {
    padding: 0;
    /* No padding to align to top */
    width: 100%;
    /* Explicitly set to 100% of viewport width */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Bottom SVG styles */
.overlay-svg-bottom {
    z-index: 1000 !important;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    /* No gap between images */
    width: 100%;
    /* Ensure the grid itself takes full width of its container */
}

.gallery-item {
    height: 30vh;
    /* Explicit uniform height for all gallery items */
    overflow: hidden;
    position: relative;
    background-color: transparent;
    /* Make the item background transparent */
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
    box-sizing: border-box;
    /* Include any padding/border in the width calculation */
    display: block;
    /* Make links behave like block elements */
    text-decoration: none;
    /* Remove underline from links */
    color: inherit;
    /* Inherit text color */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.2);
    /* Subtle scale instead of darkening */
    opacity: 0.3;
    /* Keep full opacity */
    filter: none;
    /* Remove any filters */
}

/* New size classes for gallery items - Flexbox version */
.size-1of6 {
    flex: 0 0 16.6667%;
    /* 1/6 = 16.67% */
}

.size-1-5of6 {
    flex: 0 0 25%;
    /* 1.5/6 = 25% */
}

.size-2of6 {
    flex: 0 0 33.3333%;
    /* 2/6 = 33.33% */
}

.size-3of6 {
    flex: 0 0 50%;
    /* 3/6 = 50% */
}

/* Item Count Controls */
.item-count-controls {
    text-align: center;
    margin: 60px auto 40px;
    padding: 30px;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.item-count-controls h4 {
    color: #FFD89C;
    margin-bottom: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.radio-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.radio-label:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 216, 156, 0.3);
    transform: translateY(-2px);
}

.radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    transition: all 0.3s ease;
    background: transparent;
}

.radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFD89C;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

.radio-label input[type="radio"]:checked+.radio-custom {
    border-color: #FFD89C;
    background: rgba(255, 216, 156, 0.1);
}

.radio-label input[type="radio"]:checked+.radio-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

.radio-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.radio-label input[type="radio"]:checked~.radio-text {
    color: #FFD89C;
}

.radio-label:hover .radio-text {
    color: #ffffff;
}

/* Gallery Footer (similar to index page footer, but with specific class for potential overrides) */
.gallery-footer {
    padding: 40px 20px 2rem 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 60px;
    margin-bottom: 2rem;
    /* Add bottom margin to match other pages */
}

.gallery-footer .footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    /* Space below nav links */
    display: flex;
    justify-content: center;
}

.gallery-footer .footer-nav li {
    margin: 0 15px;
}

.gallery-footer .footer-nav a {
    text-decoration: none;
    color: #a0a0a0;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.gallery-footer .footer-nav a:hover {
    color: #ffffff;
}

.gallery-footer .social-icons {
    margin-bottom: 25px;
    /* Space below social icons */
    margin-top: 44px;
    /* Space above social icons */
}

.gallery-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Gallery Styles */
.gallery-item {
    position: relative;
    /* Establishes a positioning context for the overlay */
    overflow: hidden;
    /* Optional: helps if content might unexpectedly overflow item boundaries */
}

.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    /* Very light semi-transparent overlay */
    opacity: 1;
    /* Always visible */
    visibility: visible;
    pointer-events: none;
    z-index: 1;
    /* Base z-index for the overlay */
}

.gallery-item:hover .gallery-hover-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-hover-overlay img {
    display: block;
    /* Removes any extra space below the image if it were inline */
    height: 20%;
    /* SVG height is 20% of the .gallery-hover-overlay's height */
    width: auto;
    /* Maintains the SVG's aspect ratio */
    max-width: 20%;
    /* Prevents the SVG from becoming wider than 20% of the overlay width */
}

/* Ensure overlay and all children are always fully opaque */
.gallery-hover-overlay {
    z-index: 10;
}

.gallery-hover-overlay {
    visibility: visible !important;
}

.gallery-hover-overlay * {
    visibility: visible !important;
}

/* SVGs are hidden by default and shown on hover */
.overlay-svg-top,
.overlay-svg-bottom {
    opacity: 0 !important;
    visibility: visible !important;
}

.gallery-item:hover .overlay-svg-top,
.gallery-item:hover .overlay-svg-bottom {
    opacity: 1 !important;
}

/* Base styles for both SVGs */
.overlay-svg-top,
.overlay-svg-bottom {
    position: absolute !important;
    left: 50% !important;
    width: 15px !important;
    height: 15px !important;
    max-width: none !important;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    will-change: transform, opacity;
    z-index: 1000 !important;
    /* Way above everything */
    opacity: 0 !important;
    /* Hidden by default */
    overflow: visible !important;
}

/* Top SVG specific - starts further up */
.overlay-svg-top {
    top: 32% !important;
    transform: translate(-50%, -100%) !important;
    width: 5px !important;
    height: 5px !important;
}

/* Bottom SVG specific - starts further down */
.overlay-svg-bottom {
    top: 76% !important;
    transform: translate(-50%, 0%) !important;
    width: 20px !important;
    height: 20px !important;
}

/* Hover states - show and transform */
.gallery-item:hover .overlay-svg-top,
.gallery-item:hover .overlay-svg-bottom {
    opacity: 1;
    /* Show on hover */
}

.gallery-item:hover .overlay-svg-top {
    transform: translate(-50%, -50%) !important;
    /* Move down towards title */
}

.gallery-item:hover .overlay-svg-bottom {
    transform: translate(-50%, -50%) !important;
    /* Move up towards title */
}

/* Adjustments for tall columns (60vh height) */
.gallery-item[style*="height: 60vh"] .overlay-svg-top {
    top: 40% !important;
    transform: translate(-50%, -100%) !important;
}

.gallery-item[style*="height: 60vh"] .overlay-svg-bottom {
    top: 60% !important;
    transform: translate(-50%, 0%) !important;
}

.gallery-item[style*="height: 60vh"]:hover .overlay-svg-top {
    transform: translate(-50%, -80%) !important;
}

.gallery-item[style*="height: 60vh"]:hover .overlay-svg-bottom {
    transform: translate(-50%, -20%) !important;
}

.project-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    /* Medium */
    font-size: 0.7rem;
    /* 30% smaller */
    text-transform: uppercase;
    white-space: nowrap;
    /* Prevent text wrapping */
    letter-spacing: 1.0em;
    /* Larger spacing when not hovered */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s, letter-spacing 0.3s ease-in-out;
    z-index: 30;
    /* Above both overlay and SVGs */
    pointer-events: none;
    /* So it doesn't interfere with hover on SVGs or underlying elements */
    text-align: center;
    /* Keep text centered */
    padding: 0 20px;
    /* Add some horizontal padding */
    width: auto;
    /* Let the content determine the width */
    max-width: 100%;
    /* Ensure it doesn't overflow the viewport */
}

.gallery-item:hover .project-name {
    opacity: 1;
    visibility: visible;
    letter-spacing: 0.5em;
    /* Tighter spacing on hover */
    transition: opacity 0.3s ease-in-out, visibility 0s 0s, letter-spacing 0.3s ease-in-out;
}

/* About Page Styles */
.about-hero-container {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    margin-bottom: 0;
}

.about-hero-section {
    min-height: 100vh;
    background: rgba(33, 3, 44, 0.3);
    position: relative;
    z-index: 2;
}

.about-section-divider {
    width: 100%;
    height: 180px;
    background: rgba(33, 3, 44, 0.3);
    position: relative;
    clip-path: url(#aboutDividerCurveClip);
    z-index: 1;
}

.about-team-section {
    position: relative;
    width: 100vw;
    min-height: auto;
    background: transparent;
    z-index: 2;
    padding: 0 2rem 2rem 2rem;
    box-sizing: border-box;
    margin-top: -1px;
}

.about-page {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.about-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Who We Are Section */
.who-we-are {
    text-align: center;
    padding-top: 2rem;
}

.about-logo {
    margin-bottom: 3rem;
    padding-top: 1rem;
    /* Add padding to match other pages' 48px total */
}

.about-logo a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.about-logo a:hover {
    transform: scale(1.05);
}

.about-logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
}

.astronaut-container {
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
}

.astronaut-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.astronaut-image:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(255, 216, 156, 0.4);
}

.astronaut-image::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #FFD89C, transparent, #FFD89C);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.astronaut-image:hover::before {
    opacity: 0.6;
}

.astronaut-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 6px;
    color: #FFD89C;
    margin-bottom: 3rem;
    text-transform: uppercase;
    text-align: left;
    margin-left: 20%;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}

.intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    font-weight: 300;
    max-width: 500px;
    margin-left: auto;
    margin-right: 15%;
    text-align: right;
}

.accent-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD89C, transparent);
    margin: 2rem 0;
    margin-left: 20%;
}

.manifesto-text {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    font-weight: 300;
    font-style: italic;
    max-width: 550px;
    margin-left: 10%;
}

.genesis-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-top: 2rem;
    max-width: 450px;
    margin-left: auto;
    margin-right: 15%;
    text-align: right;
}

/* Contact Info Section */
.contact-info {
    padding: 2rem;
}

.contact-container {
    display: block;
    max-width: 400px;
    margin: 0;
    margin-left: 20%;
}

.studio-info {
    margin-bottom: 3rem;
}

.general-enquiries {
    margin-bottom: 2rem;
}

.contact-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.studio-address {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-weight: 300;
    font-size: 1.1rem;
}

.studio-address p {
    margin: 0.2rem 0;
}

.contact-details {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 1.1rem;
}

.email {
    margin-bottom: 0.5rem;
}

.phone {
    margin: 0;
}

/* Our Team Section */
.our-team {
    text-align: center;
    padding: 0 2rem 2rem 2rem;
}

.our-team .section-title {
    margin-bottom: 8rem;
    text-align: center;
    margin-left: 0;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

.team-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.team-member {
    text-align: center;
}

.member-image {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.member-image:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 216, 156, 0.3);
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #FFD89C;
    margin-bottom: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: capitalize;
}

.member-role {
    font-size: 0.75rem;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* About Footer */
.about-footer {
    padding: 40px 20px 2rem 20px;
    text-align: center;
    margin-top: 0;
}

.about-footer .footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3rem;
    margin: 0 0 25px 0;
    /* Space below nav links - matches gallery */
}

.about-footer .footer-nav li {
    margin: 0 15px;
    /* Matches gallery spacing */
}

.about-footer .footer-nav a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: 500;
}

.about-footer .footer-nav a:hover,
.about-footer .footer-nav a.active {
    color: #ffd89c;
}

.about-footer .social-icons {
    margin-bottom: 25px;
    margin-top: 44px;
    display: flex;
    justify-content: center;
}

.about-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Contact Page Styles */
.contact-page {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.contact-header {
    display: flex;
    justify-content: center;
    padding: 3rem 20px 20px;
    /* Changed from 40px to 3rem (48px) for consistency */
    width: 100%;
    box-sizing: border-box;
}

.contact-header .logo {
    margin-bottom: 0;
}

.contact-header .logo img {
    max-width: 200px;
    height: auto;
    opacity: 1;
}

/* Contact Form Section */
.contact-form-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 10px;
    color: #F4C87E;
    margin-bottom: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.contact-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    text-align: center;
    font-weight: 300;
}

/* Contact Form */
.contact-form {
    width: 100%;
    max-width: 900px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: hidden;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    transition: all 0.3s ease;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.form-row .form-input:last-child,
.form-row .form-select:last-child {
    border-right: none;
}

.form-select {
    margin-bottom: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4C87E' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2rem center;
    background-size: 20px;
    padding-right: 4rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem 2rem;
}

.form-row:last-of-type .form-input,
.form-row:last-of-type .form-select {
    border-bottom: none;
}

.form-select:first-child {
    grid-column: 1 / -1;
    border-right: none;
}

.form-select option {
    background: #1a1a2e;
    color: #FFFFFF;
}

.form-textarea {
    resize: none;
    margin-bottom: 0;
    min-height: 150px;
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.02);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Checkbox styling */
.form-checkbox {
    display: flex;
    align-items: center;
    padding: 2rem;
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
}

.form-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    margin-right: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
}

.form-checkbox input[type="checkbox"]:checked {
    background: #F4C87E;
    border-color: #F4C87E;
}

.form-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #1a1a2e;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.form-checkbox label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
}

/* Submit button container */
.form-submit-container {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* Submit button */
.form-submit {
    background: linear-gradient(90deg, rgba(255, 216, 156, 0.8), rgba(255, 216, 156, 0.6));
    color: #1a1a2e;
    padding: 1rem 3rem;
    border: none;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 4px 15px rgba(255, 216, 156, 0.3);
}

.form-submit:hover {
    background: linear-gradient(90deg, rgba(255, 216, 156, 1), rgba(255, 216, 156, 0.8));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 216, 156, 0.4);
}

.form-submit:active {
    transform: translateY(0);
}

/* Contact Footer */
.contact-footer {
    padding: 40px 20px 2rem 20px;
    text-align: center;
    margin-top: auto;
    margin-bottom: 2rem;
    /* Match other pages */
}

.contact-footer .footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3rem;
    margin: 0 0 25px 0;
}

.contact-footer .footer-nav li {
    margin: 0 15px;
}

.contact-footer .footer-nav a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: 500;
}

.contact-footer .footer-nav a:hover,
.contact-footer .footer-nav a.active {
    color: #ffd89c;
}

.contact-footer .social-icons {
    margin-bottom: 25px;
    margin-top: 44px;
    display: flex;
    justify-content: center;
}

.contact-footer .copyright-text {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
    padding-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-container {
        margin: 0 auto;
        text-align: center;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-title {
        font-size: 2rem;
        letter-spacing: 4px;
        margin-left: 0;
        text-align: center;
    }

    .about-section {
        padding: 2rem 1rem;
    }

    .about-footer .footer-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .about-content {
        margin: 0 auto;
        text-align: center;
    }

    .intro-text,
    .manifesto-text,
    .genesis-text {
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }

    .accent-line {
        margin: 2rem auto;
    }

    /* Contact page responsive */
    .contact-title {
        font-size: 1.8rem;
        letter-spacing: 4px;
    }

    .contact-form {
        border-radius: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-row .form-input,
    .form-row .form-select {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .form-row:last-of-type .form-input:last-child {
        border-bottom: none;
    }

    .contact-footer .footer-nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    .form-submit {
        padding: 0.8rem 2rem;
        font-size: 0.8rem;
    }

    /* GALLERY PAGE RESPONSIVE STYLES */

    /* Gallery Header */
    .gallery-header {
        padding-top: 1.5rem;
    }

    .gallery-header .logo {
        margin-bottom: 1.5rem;
    }

    .gallery-header .logo img {
        height: 20px;
        /* Smaller logo on mobile */
    }

    /* Gallery Navigation */
    .dynamic-gallery-nav ul {
        gap: 1rem;
        flex-wrap: wrap;
        /* Allow wrapping on small screens */
        padding: 0 1rem;
    }

    .dynamic-gallery-nav li {
        margin: 0;
        /* Reset margin */
    }

    .dynamic-gallery-nav a {
        font-size: 0.75rem;
        /* Smaller text */
        letter-spacing: 1px;
    }

    /* Gallery Grid - Force Column Layout on Mobile */
    .gallery-grid {
        flex-direction: column !important;
        /* Override JS inline styles if any */
        display: block !important;
        /* Simplify layout */
    }

    /* Override JS-assigned sizes on mobile to full width */
    .gallery-item,
    .nested-stack,
    .size-1of6,
    .size-1-5of6,
    .size-2of6,
    .size-3of6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: 40vh !important;
        /* Fixed reasonable height for mobile */
        margin-bottom: 0;
        /* No margin between items */
    }

    /* Reset nested stacks to just be containers */
    .nested-stack {
        height: auto !important;
        display: block !important;
    }

    /* Gallery Footer */
    .gallery-footer {
        padding-top: 2rem;
    }

    .gallery-footer .footer-nav ul {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {

    /* Gallery Specific Mobile Tweaks */
    .gallery-item {
        height: 30vh !important;
        /* Slightly shorter on very small screens */
    }

    .dynamic-gallery-nav ul {
        justify-content: center;
        gap: 0.8rem;
    }

    .dynamic-gallery-nav a {
        font-size: 0.7rem;
    }
}