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

body {
    font-family: sans-serif; /* Placeholder font */
    /* Remove fixed width/height, allow full viewport */
    margin: 0; /* Remove auto margin */
    /* Body no longer needs relative positioning if wrapper handles it */
    /* position: relative; */
    /* Overflow hidden might still be desired depending on content behavior */
    overflow-x: hidden; /* Prevent horizontal scrollbar often caused by vw units */
    /* Set the background color for content below the fold */
    background-color: #A8EAE3;
    /* Remove padding-top since banner is now at bottom */
    padding-top: 0;
    /* Add padding-bottom to account for fixed Filming banner */
    padding-bottom: 180px;
}

/* New Site Wrapper */
.site-wrapper {
    position: relative; /* Establishes positioning context for children */
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Clip content exceeding viewport */
}

/* Layer 2: Clipped Background */
.frame-1 {
    position: absolute; /* Position relative to site-wrapper */
    top: 0;
    left: 0;
    width: 100%; /* Fill wrapper */
    height: 100%; /* Fill wrapper */
    background-color: #8DC6CC; /* The main visible background color */
    overflow: hidden; /* Should be empty, but good practice */
    z-index: 2; /* Sits above hover-reveal */

    /* Define CSS variables for mask position and size */
    --mouse-x: 0px;
    --mouse-y: 0px;
    --mask-size: 0px; /* Start with 0 size */

    /* Use CSS Masking instead of clip-path */
    mask-image: radial-gradient(
        circle var(--mask-size) at var(--mouse-x) var(--mouse-y),
        transparent 99%, /* Make the circle area transparent in the mask */
        black 100% /* Everything else is opaque black (keeps frame-1 visible) */
    );
    /* Add vendor prefix for broader compatibility */
    -webkit-mask-image: radial-gradient(
        circle var(--mask-size) at var(--mouse-x) var(--mouse-y),
        transparent 99%, /* Make the circle area transparent in the mask */
        black 100% /* Everything else is opaque black (keeps frame-1 visible) */
    );
    /* Ensure mask covers the whole element */
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Mask group and Cursor tracker - Removed from HTML, commenting out CSS */
/* .mask-group { ... } */
/* .cursor-tracker { ... } */

/* Layer 1: Revealed Background */
.hover-reveal {
    position: absolute; /* Position relative to site-wrapper */
    top: 0;
    left: 0;
    width: 100%; /* Match site-wrapper */
    height: 100%; /* Match site-wrapper */
    /* Update background color as requested */
    background-color: #A8EAE3;
    z-index: 1; /* Sits behind frame-1 */
    overflow: hidden;
}

/* Styling for content WITHIN hover-reveal remains the same */
.culture-text {
    /* Fill the hover-reveal container */
    position: absolute; /* Keep absolute to contain within hover-reveal */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #b695eb;
    /* Update font family */
    font-family: 'Micro 5', sans-serif;
    /* Double the font size */
    font-size: 3vw; /* Adjust the value (e.g., 1.5vw) as needed */
    line-height: 1.1; /* Adjust line height for larger font */
    text-align: justify;
    overflow: hidden;
    word-wrap: break-word;
    padding: 10px;
    hyphens: auto;
}

.image-1 {
    /* Central image within hover-reveal, attempt responsive positioning */
    position: absolute;
    /* Center horizontally, align to bottom */
    /* top: 50%; */
    bottom: 0;
    left: 50%;
    /* Use relative width/height, max-width/height to prevent overflow */
    width: 40%; /* Relative width */
    max-width: 510px; /* Max width from Figma */
    height: auto; /* Maintain aspect ratio */
    max-height: 90%; /* Limit height relative to container */
    /* Apply horizontal centering, scaling */
    transform: translateX(-50%) scale(1.5);
    /* background-color: #ccc; */ /* Removed Placeholder background */
    display: block;
    object-fit: cover;
}

/* Layer 3: Always Visible Content */
/* Navigation, Title, Images are now siblings to frame-1 and hover-reveal,
   positioned relative to site-wrapper */

/* Navigation */
.navigation {
    position: fixed; /* Changed from absolute to fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 999999; /* Increased z-index to ensure it's on top */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease; /* Added transition for opacity change */
}

.nav-background {
    position: absolute;
    width: 100%;
    height: 5vh; /* Give background a relative height */
    min-height: 33px; /* Minimum height */
    background-color: rgb(46, 46, 46);
    z-index: -1; /* Keep behind pills */
}

.nav-pills {
    width: 80%; /* Take up most of the nav width */
    max-width: 1169px; /* Max width from figma */
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative; /* Keep above background */
}

.nav-pill {
    padding: 0.5em 1em; /* Use em for padding */
    text-decoration: none;
    color: rgb(254, 233, 231);
    font-size: clamp(12px, 1.5vw, 16px); /* Responsive font size */
    border-radius: 8px;
    white-space: nowrap;
    text-align: center;
    margin: 0 0.5vw; /* Relative margin */
    transition: color 0.3s ease; /* Added transition for color change */
}

.nav-pill:hover, .nav-pill.active {
    color: #B695EB; /* Change text color on hover/active */
}

/* Class for scrolled navigation */
.navigation.scrolled {
    opacity: 0.4; /* 40% opacity when scrolled */
}

/* Main Title */
.main-title {
    position: absolute; /* Position relative to site-wrapper */
    left: 50%;
    transform: translateX(-50%);
    top: 25vh;
    width: 90%;
    max-width: 1046px;
    height: auto;
    font-size: clamp(50px, 12vw, 150px);
    text-align: center;
    color: #333;
    line-height: 1;
    z-index: 3; /* Above clipped frame-1 */
    /* Update font family */
    font-family: 'IM FELL DW Pica', serif;
    white-space: nowrap; /* Prevent wrapping */
}

/* Add spacing between title words */
.title-word-1 {
    margin-right: 0.5em; /* Adjust this value for desired space */
}

/* Add CSS variables for parallax effect */
:root {
    --parallax-x: 0;
    --parallax-y: 0;
    --scroll-y: 0;
}

/* Floating Images */
.eye2, .ear1, .eye3, .eye4, .ear2 {
    position: absolute;
    display: block;
    object-fit: contain;
    max-width: none;
    height: auto;
    max-height: 45vh;
    transition: all 0.3s ease-out;
    filter: brightness(0.8);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Positioning styles for floating images */
.eye4 { /* Central Eye */
    left: calc(50% - 300px);
    transform: translateX(-50%) rotate(-3deg) 
               translateX(calc(var(--parallax-x) * 0.1))
               translateY(calc(var(--parallax-y) * 0.1))
               translateY(calc(var(--scroll-y) * 0.1));
    height: 40vh;
    z-index: 6;
    bottom: 0;
    filter: brightness(calc(0.8 + var(--parallax-y) * 0.01));
}

.ear1 { /* Left Ear */
    left: calc(25% - 10px); /* Moved 100px more left (90px - 100px) */
    transform: translateX(-50%) rotate(-45deg) scale(1.5)
               translateX(calc(var(--parallax-x) * 0.2))
               translateY(calc(var(--parallax-y) * 0.2))
               translateY(calc(var(--scroll-y) * 0.2));
    height: 50vh;
    z-index: 3;
    bottom: calc(15vh - 300px);
    filter: brightness(calc(0.8 + var(--parallax-y) * 0.02));
}

.ear2 { /* Right Ear */
    right: 25%;
    transform: translateX(50%) rotate(20deg) scale(1.5)
               translateX(calc(var(--parallax-x) * 0.15))
               translateY(calc(var(--parallax-y) * 0.15))
               translateY(calc(var(--scroll-y) * 0.15));
    height: 50vh;
    z-index: 5; /* Reduced from 7 to be behind banners */
    bottom: calc(15vh - 300px);
    filter: brightness(calc(0.8 + var(--parallax-y) * 0.015));
}

.eye2 { /* Far Left Eye */
    left: -180px; /* Moved 100px more left (-80px - 100px) */
    transform: translateX(-30%) rotate(-10deg)
               translateX(calc(var(--parallax-x) * 0.25))
               translateY(calc(var(--parallax-y) * 0.25))
               translateY(calc(var(--scroll-y) * 0.25));
    height: 30vh;
    z-index: 4;
    bottom: calc(25vh - 300px);
    filter: brightness(calc(0.8 + var(--parallax-y) * 0.025));
}

.eye3 { /* Far Right Eye */
    right: 0%;
    transform: translateX(30%) rotate(5deg)
               translateX(calc(var(--parallax-x) * 0.25))
               translateY(calc(var(--parallax-y) * 0.25))
               translateY(calc(var(--scroll-y) * 0.25));
    height: 30vh;
    z-index: 5;
    bottom: calc(25vh - 300px);
    filter: brightness(calc(0.8 + var(--parallax-y) * 0.025));
}

/* Floating Eye Image */
.eye1-bottom {
    position: fixed;
    bottom: 1vh;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    width: auto;
    height: 10vh;
    z-index: 999;
    border: none; /* Removed border (choke) */
    object-fit: contain;
    transition: transform 0.1s ease-out;
}

/* Placeholder image styles */
img[src^="placeholder"] {
    border: 1px dashed #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    object-fit: contain; /* Show placeholder text */
}

/* --- Section 2 Styles --- */

.frame-2 {
    position: relative; /* Context for absolute children */
    width: 100%; /* Take full width */
    /* Height will be determined by content, or use min-height based on figma */
    min-height: 922px; /* From figma height */
    overflow: hidden; /* Hide overflow */
    /* background-color: transparent; Inherits body background */
}

/* Background rectangle (7843:532) - positioned inside frame-2 */
.background-rectangle-2 {
    position: absolute;
    /* Positioning based on Figma - adjust as needed */
    top: 46px;
    left: 0; /* Assumes it spans width */
    right: 0;
    /* height: 831px; */ /* Let height be determined by bottom/top or content */
    bottom: 45px; /* 922 (frame height) - 46 (top) - 831 (rect height) */
    /* Color from JSON: rgba(0.659, 0.915, 0.890, 1) */
    background-color: rgb(168, 234, 227); /* #A8EAE3 - Matches body! */
    mix-blend-mode: darken; /* From Figma */
    z-index: 5; /* Arbitrary layer, adjust based on desired overlap */
}

/* Mouse point container (7867:16312) */
.mouse-point-container {
    position: absolute;
    top: 0;
    left: -1px;
    width: 100%; /* Adjust based on 1281px from Figma and responsiveness */
    height: 100%;
    min-height: 922px;
    z-index: 6; /* Above background rectangle */
}

/* Content container (7867:16313) */
.content-container {
    position: absolute;
    top: 0;
    left: 0; /* Reset relative to parent */
    width: 100%;
    height: 100%;
    /* Color from JSON: rgba(0.960, 0.956, 0.941, 0.45) */
    background-color: rgba(245, 244, 240, 0.45);
    overflow: hidden; /* Contains its children */
    z-index: 7; /* Above parent container */
}

/* Right Top Pattern (7867:16315) */
.right-top-pattern {
    position: absolute;
    top: 0; /* Relative Transform Y */
    right: 0; /* Horizontal MAX constraint */
    width: 336px; /* Width */
    height: 336px; /* Height */
    transform: scaleY(-1); /* Relative Transform Y=-1 */
    display: grid; /* Use grid for easy positioning of pattern rects */
    grid-template-columns: repeat(6, 56px);
    grid-template-rows: repeat(6, 56px);
    z-index: 8;
}

/* Individual pattern rectangles */
.right-top-pattern > div {
    background-color: rgb(0, 0, 0);
    /* Specific grid positioning based on Figma (approximated) */
}
.pattern-rect-1 { grid-area: 6 / 6; }
.pattern-rect-2 { grid-area: 6 / 5; }
.pattern-rect-3 { grid-area: 6 / 4; }
.pattern-rect-4 { grid-area: 5 / 5; }
.pattern-rect-5 { grid-area: 4 / 5; }
.pattern-rect-6 { grid-area: 3 / 5; }
.pattern-rect-7 { grid-area: 2 / 5; }
.pattern-rect-8 { grid-area: 4 / 6; }
.pattern-rect-9 { grid-area: 6 / 3; }
.pattern-rect-10 { grid-area: 5 / 3; }
.pattern-rect-11 { grid-area: 5 / 2; }
.pattern-rect-12 { grid-area: 4 / 4; }
.pattern-rect-13 { grid-area: 3 / 4; }
.pattern-rect-14 { grid-area: 3 / 6; }
.pattern-rect-15 { grid-area: 2 / 6; }
.pattern-rect-16 { grid-area: 1 / 6; }
.pattern-rect-17 { grid-area: 4 / 3; }
.pattern-rect-18 { grid-area: 6 / 2; }
.pattern-rect-19 { grid-area: 6 / 1; }
.pattern-rect-20 { grid-area: 5 / 4; }
.pattern-rect-21 { grid-area: 5 / 6; }

/* Line Bottom (7869:16823) */
.line-bottom {
    position: absolute;
    bottom: calc(100% - 562px - 198px); /* Approximate bottom based on Y and Height */
    left: -18px;
    width: calc(100% + 36px); /* Approximate width based on 1299px */
    height: 198px; /* Approximate height */
    border-bottom: 0.93px solid rgb(46, 46, 46);
    border-radius: 23px;
    z-index: 8;
}

/* Main Text Image (7867:16342) */
.main-text-image {
    position: absolute;
    top: 552px;
    left: -23px;
    width: calc(100% + 46px); /* Approx width based on 1328px */
    height: 184px;
    object-fit: cover; /* Or 'tile' if image repeats */
    background-color: #ccc; /* Placeholder */
    z-index: 9; /* Above line */
}

/* Flower Vector (7869:16822) - Placeholder */
.flower-vector {
    position: absolute;
    top: 562px;
    left: 50%; /* Centered roughly */
    transform: translateX(-50%);
    width: 119px;
    height: 120px;
    background-color: #333; /* Placeholder */
    z-index: 10; /* Above main text image */
    /* Add SVG or image content here */
}

/* Top Text Group (7869:16838) */
.top-text-group {
    position: absolute;
    top: 18.5px;
    left: 18.5px;
    right: 18.5px; /* Stretch across top */
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    color: rgb(46, 46, 46);
}

.top-text-link {
    text-decoration: none;
    color: inherit;
    font-size: 14px; /* Adjust as needed */
    padding: 0 10px;
}

.top-text-logo {
    display: flex;
    align-items: center;
    position: absolute; /* Center the logo */
    left: 50%;
    transform: translateX(-50%);
}

.logo-icon {
    width: 14px;
    height: 14px;
    background-color: rgb(46, 46, 46); /* Placeholder */
    margin-right: 6px;
    /* Add SVG/icon here */
}

.logo-text {
    font-size: 16px; /* Adjust as needed */
}

.top-text-line {
    position: absolute;
    bottom: -1px; /* Position below text */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(46, 46, 46);
}

/* Navigate Widget (9771:587) - Placeholder */
.navigate-widget {
    position: absolute;
    bottom: calc(100% - 744px - 68px); /* Approx position */
    left: 489px;
    width: 68px;
    height: 68px;
    background-color: #aaa; /* Placeholder */
    border-radius: 50%;
    z-index: 10;
}

/* Bottom Dark Rectangle (9819:67) */
.bottom-dark-rectangle {
    position: absolute;
    bottom: 0;
    left: 0; /* Adjust if needed based on 1px offset */
    width: 100%;
    height: 107px;
    background-color: rgb(46, 46, 46);
    z-index: 9;
}

/* Background Text 2 (7843:531) */
.culture-text-2 {
    position: absolute;
    /* Positioning based on Figma (relative to frame-2) */
    top: -339px; /* Centering vertically might be tricky */
    left: 50%;
    transform: translateX(-50%);
    width: 1475px; /* Larger than viewport width often */
    max-width: 115%; /* Allow some overflow for visual effect */
    height: 1601px; /* Larger than viewport height */
    /* Color from JSON: rgba(0.712, 0.582, 0.920, 1) */
    color: rgba(255, 255, 255, 0.052); /* #B694EB */
    font-family: 'Micro 5', sans-serif; /* Match previous? */
    font-size: 3vw; /* Match previous? */
    line-height: 1.1;
    text-align: justify;
    overflow: hidden; /* Clip text */
    word-wrap: break-word;
    padding: 10px;
    hyphens: auto;
    z-index: 4; /* Below the main content of section 2 */
}

/* Left Mid Text (7867:16339 / 9810:119) */
.left-mid-text-container {
    position: absolute;
    top: 20px;
    left: 55px;
    width: 442px;
    height: 56px;
    display: flex;
    align-items: center;
    z-index: 20; /* Ensure it's above images */
}

.left-mid-text-line {
    width: 196px;
    height: 1px;
    background-color: #2E2E2E;
}

.left-mid-text {
    color: #2E2E2E;
    font-size: 24px;
    margin-left: 28px;
    font-family: 'IM Fell DW Pica', serif;
    opacity: 0.2; /* Reduced opacity to 20% */
}

/* Update mid-section-0 */
.mid-section-0 {
    position: relative;
    top: 70px; /* Adjusted to provide some space from top */
    left: 0;
    width: 100%;
    height: 494px; /* Maintain original height */
    z-index: 10; /* Make sure it's above background elements */
    overflow: visible;
}

/* Photo Gallery Container */
.photo-gallery-container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 46, 46, 0.5) transparent;
    position: relative;
}

.photo-gallery-container::-webkit-scrollbar {
    height: 8px;
}

.photo-gallery-container::-webkit-scrollbar-track {
    background: transparent;
}

.photo-gallery-container::-webkit-scrollbar-thumb {
    background-color: rgba(46, 46, 46, 0.5);
    border-radius: 10px;
}

/* Photo Gallery */
.photo-gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 30px 50px;
    min-width: max-content;
    height: 100%;
}

/* Gallery Items */
.gallery-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
    height: auto;
}

/* Image Container */
.gallery-image-container {
    width: 280px;
    height: 320px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: #242424;
}

.gallery-image-container.wide {
    width: 500px;
}

.gallery-image-container.tall {
    height: 420px;
}

.gallery-image-container.tall-wide {
    width: 400px;
    height: 400px;
}

/* Gallery Images */
.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

/* Gallery Caption */
.gallery-caption {
    padding: 15px 0;
    max-width: 280px;
}

.gallery-caption h3 {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 16px;
    color: #B695EB;
    margin-bottom: 5px;
    opacity: 0.8; /* Reduced opacity to 20% */
}

.gallery-caption p {
    font-family: 'Linden Hill', serif;
    font-size: 13px;
    color: #2E2E2E;
    opacity: 0.8; /* Reduced opacity to 20% */
    line-height: 1.3;
}

/* Image Overlay Text */
.image-overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 20px;
    text-align: center;
}

.image-overlay-text span {
    font-family: 'Micro 5', sans-serif;
    font-size: 34px;
    margin-bottom: 10px;
    opacity: 0.2; /* Reduced opacity to 20% */
}

.image-overlay-text p {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 22px;
    opacity: 0.2; /* Reduced opacity to 20% */
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 20px;
    right: 30px;
    background-color: rgba(46, 46, 46, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 14px;
    animation: pulse 2s infinite;
    z-index: 10;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

/* Remove old mid-section styles that are no longer needed */
.mid-pics-container,
.mid-pics-group,
.mid-pic-group-10,
.mid-pic-group-8,
.frame-11,
.qr-code-text,
.made-people-text,
.year-text,
.qr-description,
.pros-cons-text,
.fishbone-text {
    display: none;
}

/* Scrolling Text Banner */
.scrolling-text-container {
    position: absolute;
    top: 552px;
    left: 0;
    width: 100%;
    height: 180px;
    overflow: hidden;
    z-index: 20; /* Higher z-index than ear2 */
    background-color: #242424;
}

/* Container for text */
.scrolling-text,
.scrolling-text-clone {
    position: absolute;
    height: 100%;
    white-space: nowrap;
    display: flex;
    align-items: right;
    width: auto; /* Make sure it takes up enough space */
}

/* Use a continuous seamless scrolling approach */
.scrolling-text {
    animation: scrollText 60s linear infinite;
    left: 50%;
}

.scrolling-text-clone {
    animation: scrollText 60s linear infinite;
    animation-delay: -60s; /* Half the animation duration */
    left: 100%; /* Start at right edge */
}

.scrolling-text span,
.scrolling-text-clone span {
    display: inline-block;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 160px;
    line-height: 1;
    color: #A8EAE3;
    text-shadow: 0 0 2px rgba(0,0,0,0.1);
    text-transform: uppercase;
    margin-right: 5em; /* Very large gap between words */
    letter-spacing: 0.08em; /* Even more letter spacing */
    font-weight: 400;
}

/* Second scrolling banner for "Filming" */
.scrolling-text-container-2 {
    /* Override any other positioning or stacking context */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Use viewport width to ensure full coverage */
    height: 180px !important;
    overflow: hidden !important;
    z-index: 2147483647 !important; /* Maximum possible z-index value */
    background-color: #1E1E1E !important;
    will-change: transform !important;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.3) !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    
    /* Reset any potential inherited properties that could affect stacking */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Use hardware acceleration */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    
    /* Prevent any container from clipping it */
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Add a non-intrusive indicator for debugging z-index issues */
.scrolling-text-container-2::after {
    content: '';
    position: absolute;
    top: 0;
    right: 5px;
    width: 10px;
    height: 10px;
    background-color: lime; /* Visual indicator that this is the topmost element */
    border-radius: 50%;
    z-index: 2147483647; /* Maximum possible z-index value */
}

.scrolling-text-container-2::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
    z-index: 1;
    opacity:0.5;
}

.scrolling-text-2,
.scrolling-text-clone-2 {
    position: absolute;
    height: 100%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    width: max-content;
    transition: opacity 0.5s ease;
}

.scrolling-text-2 {
    animation: scrollText 40s linear infinite;
    left: 0;
}

.scrolling-text-2.active {
    opacity: 1;
}

.scrolling-text-2 span,
.scrolling-text-clone-2 span {
    display: inline-block;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 160px;
    line-height: 1;
    color: #A8EAE3;
    text-shadow: 0 0 2px rgba(0,0,0,0.1);
    text-transform: uppercase;
    margin-right: 5em;
    letter-spacing: 0.08em;
    font-weight: 400;
    transition: opacity 0.5s ease;
}

/* Simplified animation for truly seamless scrolling */
@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Remove old animations */
@keyframes scrollBanner {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee2 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Original main-text-image styles (can be removed or commented out) */
.main-text-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 2;
    /* Replace with your actual image or this can be removed */
    background-color: rgba(248, 244, 244, 0.1);
    display: none; /* Hide since we're replacing with scrolling text */
}

/* Section 3: About & Contact */
.section-3 {
    background-color: #FFFFFF;
    position: relative;
    z-index: 20;
}

.about-contact-container {
    padding: 80px 0;
    position: relative;
    transition: background-color 0.3s ease;
}

.about-contact-container.dark {
    background-color: #242424;
    color: #FFFFFF;
}

.section-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

.section-header {
    margin-bottom: 60px;
    position: relative;
}

.section-header h2 {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: #242424;
}

.dark .section-header h2 {
    color: #FFFFFF;
}

.header-line {
    width: 100px;
    height: 2px;
    background-color: #B695EB;
}

/* About Section Styles */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-headline {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #242424;
}

.about-description {
    font-family: 'Linden Hill', serif;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #555555;
}

.about-image {
    position: relative;
    overflow: hidden;
    height: 500px;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.05);
}

.about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 80px;
}

.value-item {
    padding: 30px;
    background-color: #F8F8F8;
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateY(-10px);
}

.value-number {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 48px;
    color: #B695EB;
    display: block;
    margin-bottom: 15px;
}

.value-item h3 {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 24px;
    margin-bottom: 15px;
    color: #242424;
}

.value-item p {
    font-family: 'Linden Hill', serif;
    font-size: 16px;
    line-height: 1.5;
    color: #555555;
}

/* Contact Section Styles */
.contact-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 60px;
}

.contact-form {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 2px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 16px;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-family: 'Linden Hill', serif;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #B695EB;
    outline: none;
}

.submit-btn {
    background-color: #B695EB;
    color: #FFFFFF;
    border: none;
    padding: 15px 30px;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #A57FE0;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-item {
    margin-bottom: 30px;
}

.contact-item h3 {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 20px;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.contact-item p {
    font-family: 'Linden Hill', serif;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

.contact-social {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}

.social-link {
    color: #B695EB;
    font-family: 'IM Fell DW Pica', serif;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    transition: color 0.3s;
}

.social-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #B695EB;
    transition: width 0.3s;
}

.social-link:hover {
    color: #FFFFFF;
}

.social-link:hover::after {
    width: 100%;
}

/* Behind the Scenes Section - Video Project */
.behind-scenes-container {
    padding: 60px 20px;
    background-color: #f8f8f8;
    position: relative;
    z-index: 10;
}

.behind-title {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 42px;
    color: #242424;
    text-align: center;
    margin-bottom: 40px;
}

.behind-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.behind-item {
    width: 200px;
    text-align: center;
    transition: transform 0.3s ease;
}

.behind-item:hover {
    transform: translateY(-10px);
}

.behind-image-container {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    background-color: #e9e9e9;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.behind-image {
    width: 80%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.behind-item:hover .behind-image {
    transform: rotate(15deg) scale(1.1);
}

.behind-caption {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 18px;
    color: #B695EB;
    margin: 0;
}

/* Ensure navigation is on top layer for video-project.html */
.video-project .navigation,
body > .navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000000; /* Very high z-index but below the filming banner */
    pointer-events: auto;
}

.video-project .nav-background,
body > .navigation .nav-background {
    background-color: rgba(46, 46, 46, 0.9); /* Semi-transparent for better visibility */
}

.video-project .nav-pills,
body > .navigation .nav-pills {
    padding: 10px 0;
}

/* Eye elements */
.eye-1-container {
    position: absolute;
    z-index: 3;
    cursor: pointer;
}

.eye-1 {
    width: 50%;
    transform-origin: center;
    transition: transform 0.1s ease;
}

/* About section styling */
.about-background {
    background-color: #B695EB !important;
}

.about-text {
    color: white; /* Change text color for better contrast */
}

.double-size {
    font-size: 200%;
    font-weight: bold;
    display: inline-block;
    margin: 0 5px;
    color: rgba(182, 149, 235, 0.8);
    transform: rotate(-3deg);
    position: relative;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Mid-pic text areas */
.text-area-1, .text-area-2, .text-area-3 {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 15px;
    border-radius: 5px;
    margin: 10px;
    max-width: 300px;
}

.text-area-1 h3, .text-area-2 h3, .text-area-3 h3 {
    margin-bottom: 5px;
    color: #B695EB;
}

/* Media links container */
.media-links-container {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 20px;
    z-index: 10;
}

.media-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.media-link:hover {
    transform: translateY(-5px);
}

.media-icon-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 5px;
}

.media-icon {
    width: 80%;
    height: auto;
    object-fit: contain;
}

.media-caption {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 12px;
    color: #B695EB;
    text-align: center;
}

/* Updated text colors for better contrast with #B695EB background */
.about-contact-container[style*="background-color: #B695EB"] .section-header h2,
.about-contact-container[style*="background-color: #B695EB"] .about-headline,
.about-contact-container[style*="background-color: #B695EB"] .about-description,
.about-contact-container[style*="background-color: #B695EB"] .value-item h3,
.about-contact-container[style*="background-color: #B695EB"] .value-item p {
    color: white;
}

.about-contact-container[style*="background-color: #B695EB"] .value-number {
    color: rgba(255, 255, 255, 0.7);
}

.about-contact-container[style*="background-color: #B695EB"] .value-item {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Filming Section Styles */
.frame-filming {
    position: relative;
    padding: 60px 0;
    background-color: #A8EAE3;
    overflow: hidden;
}

/* Video Project Container */
.frame-filming .video-project {
    position: relative;
    width: 1280px;
    height: 832px;
    background-color: #A8EAE3;
    overflow: hidden;
    margin: 0 auto;
}

/* Video Album Container */
.frame-filming .video-album {
    position: absolute;
    top: 56px;
    left: 0;
    width: 1280px;
    height: 720px;
    overflow: hidden;
}

/* Video Slide Component */
.frame-filming .video-slide {
    position: relative;
    width: 1280px;
    height: 720px;
    border: 1px solid #972EFF;
    border-radius: 5px;
    overflow: hidden;
}

/* Video Group Container */
.frame-filming .videos-proj {
    position: relative;
    width: 5120px;
    height: 720px;
    display: flex;
    transition: transform 0.5s ease;
}

/* Individual Video Frame */
.frame-filming .video-frame {
    width: 1280px;
    height: 720px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

/* Project Images */
.frame-filming .project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.frame-filming .project-image:hover {
    transform: scale(1.02);
}

/* Information Container */
.frame-filming .info-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 419px;
    height: 834px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 4;
}

.frame-filming .info-content {
    position: absolute;
    top: 222px;
    left: 38px;
    width: 338px;
    height: 478px;
}

.frame-filming .info-title {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 48px;
    color: #B694EB;
    margin-bottom: 20px;
}

.frame-filming .info-text {
    font-family: 'Linden Hill', serif;
    font-size: 16px;
    color: #FEE9E7;
    line-height: 1.5;
}

/* Paper Tear Effect */
.frame-filming .paper-tear {
    position: absolute;
    width: 1454px;
    height: 327px;
    overflow: hidden;
    z-index: 5;
}

.frame-filming .tear-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frame-filming .paper-tear-up {
    top: 118px;
    left: 1374px;
    transform: rotate(-10deg);
    z-index: 15;
}

.frame-filming .paper-tear-down {
    bottom: -150px;
    left: -68px;
    transform: rotate(-2deg);
}

.frame-filming .paper-tear-top {
    top: -150px;
    left: -68px;
    transform: rotate(178deg);
    z-index: 15;
}

/* Behind the Scenes */
.frame-filming .behind-scenes-container {
    padding: 40px 20px;
    position: relative;
    z-index: 10;
    margin-top: 550px;
    text-align: center;
}

.frame-filming .behind-title {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 32px;
    color: #242424;
    margin-bottom: 30px;
}

.frame-filming .behind-gallery {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.frame-filming .behind-item {
    width: 150px;
    text-align: center;
    transition: transform 0.3s ease;
}

.frame-filming .behind-item:hover {
    transform: translateY(-10px);
}

.frame-filming .behind-image-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.frame-filming .behind-image {
    width: 80%;
    height: auto;
    object-fit: contain;
}

.frame-filming .behind-caption {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 14px;
    color: #B695EB;
}

/* Video Navigation */
.frame-filming .video-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    display: flex;
    justify-content: space-between;
    z-index: 20;
}

.frame-filming .nav-button {
    padding: 10px 25px;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    font-family: 'IM Fell DW Pica', serif;
    transition: color 0.3s ease;
    position: relative;
}

.frame-filming .nav-button::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #B694EB;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.frame-filming .nav-button:hover::after,
.frame-filming .nav-button.active::after {
    width: 80%;
}

.frame-filming .nav-button.active {
    color: #B694EB;
}

/* Responsive Design for filming section */
@media (max-width: 1280px) {
    .frame-filming .video-project {
        width: 100%;
        height: auto;
        padding-bottom: 200px;
    }
    
    .frame-filming .video-album {
        width: 100%;
    }
    
    .frame-filming .video-slide {
        width: 100%;
    }
    
    .frame-filming .video-frame {
        width: 100vw;
    }
    
    .frame-filming .videos-proj {
        width: 400vw;
    }
    
    .frame-filming .info-container {
        width: 30%;
        height: 100%;
    }
    
    .frame-filming .info-content {
        width: 80%;
        left: 10%;
    }
    
    .frame-filming .behind-scenes-container {
        margin-top: 750px;
    }
}

@media (max-width: 768px) {
    .frame-filming .info-container {
        width: 100%;
        height: auto;
        position: relative;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 20px;
    }
    
    .frame-filming .info-content {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }
    
    .frame-filming .video-album {
        top: 200px;
    }
    
    .frame-filming .behind-scenes-container {
        margin-top: 950px;
    }
    
    .frame-filming .video-nav {
        width: 100%;
        justify-content: center;
        gap: 20px;
    }
    
    .frame-filming .nav-button {
        font-size: 18px;
        padding: 8px 15px;
    }
}

/* Filming Section Styles */
.filming-section {
    width: 100%;
    padding: 0;
    background-color: #242424;
    position: relative;
    min-height: 100vh;
}

/* Project Gallery */
.project-gallery {
    display: flex;
    width: 100%;
    height: 100vh;
}

.project-card {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
}

.project-card:hover {
    flex: 1.2;
}

.project-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 32px;
    z-index: 2;
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    width: 80%;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.project-card:hover .project-title {
    transform: translate(-50%, -80px);
    opacity: 0.8;
}

.project-thumbnail {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    filter: brightness(0.7);
}

.project-card:hover .thumbnail-image {
    transform: scale(1.05);
    filter: brightness(0.4);
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */ /* Adjust height to fit content */
    height: auto; /* Allow height to adjust */
    display: flex;
    /* justify-content: center; */
    /* align-items: flex-end; */
    flex-direction: column; /* Stack title, icons, button vertically */
    align-items: center; /* Center items horizontally */
    padding-bottom: 30px; /* Adjust padding */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

/* Container for the icons below the title */
.project-card-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 15px; */ /* No gap needed for single icon */
    margin-top: 15px; /* Space below title */
    margin-bottom: 80px; /* Space above view button */
    width: 100%; /* Limit width */
    /* height: 50px; */ /* Remove fixed height to allow icon to grow */
    min-height: 200px; /* Set a min-height to ensure space */
}

.project-card-icon {
    /* height: 100%; */ /* Fill the container height */
    /* width: auto; */ /* Let width adjust */
    /* max-width: 60px; */ /* Increased max width slightly */
    width: auto; /* Let width adjust based on height */
    height: auto; /* Allow natural height */
    max-height: 300px; /* Tripled max height (approx from 40px original button context) */
    max-width: 400px; /* Tripled max width (from 60px) */
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.project-card:hover .project-card-icon {
    opacity: 1;
}

.view-project {
    background-color: #B695EB;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.view-project:hover {
    background-color: #9B7AD3;
}

/* Project Details Container */
.project-details-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #242424;
    z-index: 1000;
    overflow: hidden;
}

.project-details-container.active {
    display: block !important;
}

.close-project {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    cursor: pointer;
    z-index: 2000;
    transition: background-color 0.3s ease;
}

.close-project:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.project-details {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.project-header {
    margin-bottom: 40px;
    text-align: center;
}

.project-name {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 48px;
    color: white;
}

/* Media Tabs */
.media-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.media-tab {
    padding: 15px 30px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'IM Fell DW Pica', serif;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.media-tab:hover {
    color: #B695EB;
}

.media-tab.active {
    color: #B695EB;
}

.media-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #B695EB;
}

/* Media Content */
.media-content-container {
    min-height: 400px;
}

.media-content {
    display: none;
}

.media-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.media-text {
    color: white;
    margin-bottom: 40px;
    line-height: 1.6;
    font-family: 'Linden Hill', serif;
    font-size: 18px;
}

.media-text p {
    margin-bottom: 20px;
}

.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.media-gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 16/9;
}

.media-gallery .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.media-gallery .gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .project-gallery {
        flex-direction: column;
        height: auto;
    }
    
    .project-card {
        height: 33vh;
    }
    
    .project-title {
        font-size: 24px;
    }
    
    .media-tabs {
        flex-wrap: wrap;
    }
    
    .media-tab {
        padding: 10px 15px;
        font-size: 16px;
    }
    
    .media-gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .project-details {
        padding: 0 15px;
    }
    
    .project-name {
        font-size: 36px;
    }
}

/* Slider Styles */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.slider__warpper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flex__container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    height: 100vh;
    width: 100%;
    z-index: 1;
}

.flex__container.flex--active {
    z-index: 2;
}

.text--sub {
    font-size: 12px;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.text--big {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 7.5em;
    font-weight: 700;
    line-height: 110px;
    margin-left: -8px;
    color: #B695EB; /* New color */
    /* Remove stroke and shadow */
    /* -webkit-text-stroke: 1px black; */ /* Removed */
    /* text-stroke: 1px black; */ /* Removed */
    text-shadow: none; /* Removed */
}

.text--normal {
    /* font-size: 13px; */ /* Original size */
    font-size: 26px; /* Doubled size */
    /* color: rgba(255, 255, 255, 0.8); */ /* Original color */
    color: #FFFFFF; /* New color: white */
    line-height: 1.4; /* Adjusted line-height for larger font */
    margin-top: 25px;
    /* Remove stroke, keep shadow for readability */
    /* -webkit-text-stroke: 1px black; */ /* Removed */
    /* text-stroke: 1px black; */ /* Removed */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.text__background {
    font-family: 'IM Fell DW Pica', serif;
    position: absolute;
    left: 72px;
    bottom: -60px;
    color: rgba(0,0,0,0.05);
    font-size: 170px;
    font-weight: 700;
    filter: brightness(0.4);
}

.flex__item {
    height: 100vh;
    color: #fff;
    transition: transform 0.1s linear;
}

.flex__item--left {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    width: 65%;
    transform-origin: left bottom;
    transition: transform 0.1s linear 0.4s;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.flex__item--right {
    width: 35%;
    transform-origin: right center;
    transition: transform 0.1s linear 0s;
    opacity: 0;
}

.flex--preStart .flex__item--left,
.flex--preStart .flex__item--right,
.flex--active .flex__item--left,
.flex--active .flex__item--right {
    opacity: 1;
}

/* Project Colors */
.flex--pikachu .flex__item--left {
    background: #f8d41f;
}

.flex--pikachu .flex__item--right {
    background: #f4ecc5;
}

.flex--piplup .flex__item--left {
    background: #3e9fe6;
}

.flex--piplup .flex__item--right {
    background: #d3eaef;
}

.flex--blaziken .flex__item--left {
    background: #f64f37;
}

.flex--blaziken .flex__item--right {
    background: #ffebcd;
}

.flex--dialga .flex__item--left {
    background: #476089;
}

.flex--dialga .flex__item--right {
    background: #ade8f7;
}

.flex--zekrom .flex__item--left {
    background: #424242;
}

.flex--zekrom .flex__item--right {
    background: #a7bcbb;
}

.flex__content {
    margin-left: 80px;
    width: 55%;
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: transform 0.2s linear 0.2s, opacity 0.5s ease;
}

.pokemon__img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transform: translateX(0);
    transition: transform 0.4s ease-in-out;
}

/* Animate-START point */
.flex__container.animate--start .flex__content {
    transform: translate3d(0,-200%,0);
    opacity: 0;
}

.flex__container.animate--start .pokemon__img {
    transform: translate3d(-200px,0,0);
    opacity: 0;
}

/* Animate-END point */
.flex__container.animate--end .flex__item--left {
    transform: scaleY(0);
}

.flex__container.animate--end .flex__item--right {
    transform: scaleX(0);
}

.flex__container.animate--end .flex__content {
    transform: translate3d(0,200%,0);
    opacity: 0;
}

.flex__container.animate--end .pokemon__img {
    transform: translate3d(200px,0,0);
    opacity: 0;
}

/* Project and Category Selectors - Permanently Hidden */
.project-selector,
.category-selector {
    display: none !important; /* Ensure they are always hidden */
}

/* Updated Slider Navigation Styles */
.slider__navi {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column; /* Stack project groups vertically */
    align-items: flex-end;
    width: auto;
    max-height: 80vh; /* Limit height */
    overflow-y: auto; /* Allow scrolling if needed */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 30px;
    /* Hide scrollbar standard */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* Hide scrollbar for WebKit browsers */
.slider__navi::-webkit-scrollbar {
    display: none;
}

.navi-section {
    position: relative;
    margin: 10px 0; /* Increased spacing between categories */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.navi-section:not(:last-child)::after {
    content: '';
    display: block;
    width: 70%; /* Make separator slightly shorter */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin-top: 10px; /* Space after category items */
    align-self: center; /* Center the separator */
}

.section-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px; /* Slightly larger */
    font-weight: 500;
    margin-bottom: 8px; /* More space below label */
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    position: relative;
    /* padding-right: 0; */ /* Removed padding, align to right */
    align-self: flex-end; /* Ensure label is right-aligned */
    transition: all 0.3s ease;
    display: flex; /* Use flex to align icon and text */
    align-items: center;
    padding-left: 20px; /* Make space for icon */
}

/* Add icons using ::before */
.section-label::before {
    content: "";
    display: inline-block;
    width: 15px; /* Small size */
    height: 15px; /* Small size */
    position: absolute; /* Position icon */
    left: 0; /* Align to the start of the padding */
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Assign specific icons based on assumed data-category from script */
/* Ensure the script adds these data-category attributes to the .navi-section elements */
.navi-section[data-category="video"] .section-label::before {
    background-image: url('images/main element/eye1.png');
}

.navi-section[data-category="album"] .section-label::before {
    background-image: url('images/main element/eye4.png');
}

.navi-section[data-category="behind"] .section-label::before {
    background-image: url('images/main element/ear1.png');
    /* Ear might need slight adjustment if alignment is off */
     width: 18px; /* Slightly wider for ear */
     height: 18px;
}

.navi-section.active-section .section-label {
    color: #fff;
    opacity: 1;
    font-weight: bold;
}

.slider__navi a {
    margin: 5px 0; /* Spacing between items */
    width: 70px; /* Standard width */
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4);
    display: block;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    text-indent: -9999px;
}

.slider__navi a::before { /* Tooltip for slide number */
    content: attr(data-slide-index); /* Show project-relative index */
    position: absolute;
    right: 120%; /* Position further left */
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.6);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.slider__navi a:hover {
    width: 85px;
    background-color: rgba(255, 255, 255, 0.7);
}

.slider__navi a:hover::before {
    opacity: 1;
}

.slider__navi a.active {
    background-color: #fff;
    width: 100px; /* Longest when active */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.slider__navi a.active::before {
    opacity: 1;
    font-weight: bold;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Image counter indicator */
.image-counter {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: white;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 10;
    font-family: 'Micro 5 Charted', sans-serif;
}

/* Overlay to ensure text is readable against any background image */
.flex__item--left::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    z-index: -1;
}

.flex__content {
    z-index: 5;
    position: relative;
}

/* Arrow navigation for gallery */
.gallery-arrows {
    position: fixed;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 50;
    pointer-events: none;
}

.arrow {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.arrow-left {
    margin-left: 20px;
}

.arrow-right {
    margin-right: 20px;
}

/* Overlay Text Auto-Hide */
.flex__content.hidden {
    opacity: 0;
    transition: opacity 0.7s ease;
}

.flex__content {
    transition: opacity 0.7s ease;
}

/* Enhanced active section styling */
.navi-section.active-section .section-label {
    color: #fff;
    opacity: 1;
    font-weight: bold;
}

.navi-section.active-section a {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Show slide index */
.slider__navi a::after {
    content: attr(data-slide-index);
    position: absolute;
    right: -25px;
    top: -8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider__navi a:hover::after,
.slider__navi a.active::after {
    opacity: 1;
}

.slider__navi a.active::after {
    color: #fff;
}

/* --- New Fashion Section Styles --- */

#section-fashion {
    position: relative; /* Crucial for absolute positioning of children */
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent content spillover */
    padding: 0; /* Remove padding */
    /* background-color: #2a2a30; */ /* Removed simple dark fallback background */
    background-image: url('images/dec/paper.png'); /* Added paper texture */
    background-size: cover; /* Ensure image covers the area */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling if image is smaller */
    /* color: white; */ /* Removed text color, title handles its own */
    z-index: 1; /* Ensure it has a stacking context */
}

/* Remove CodePen styles */
/* .codepen-embed-container { ... } */
/* .codepen-embed-container iframe { ... } */

/* Styles for the dynamically added canvas - REMOVED */
/* #fashion-bg { ... } */

.fashion-title {
    font-family: 'IM Fell DW Pica', serif;
    font-size: clamp(60px, 10vw, 120px);
    color: #ffffff;
    text-align: center;
    /* margin-bottom: 40px; */ /* Remove margin */
    /* position: relative; */ /* Change positioning */
    position: absolute; /* Use absolute positioning */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center precisely */
    z-index: 3; /* Above images and canvas */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    width: 80%; /* Prevent title being too wide */
}

.fashion-image-container {
    position: absolute; /* Take up full section space */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Above canvas, below title */
}

.fashion-image {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 25vw; /* Responsive max width */
    max-height: 35vh; /* Responsive max height */
    object-fit: contain;
    border-radius: 5px;
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.2); */ /* Removed shadow */
    animation: float-fashion 8s ease-in-out infinite alternate;
    transition: transform 0.4s ease, z-index 0s linear 0.4s; /* Add transition for zoom */
    cursor: pointer; /* Indicate images are clickable */
}

/* Style for zoomed-in image */
.fashion-image-zoomed {
    /* transform: scale(1.8) !important; */ /* Old scale */
    transform: scale(3) !important; /* New 3x scale */
    z-index: 10 !important; /* Bring to front */
}

/* Staggered initial positions and animation delays */
.fashion-image-1 { top: 15%; left: 10%; animation-delay: -1s; } /* process 6 */
.fashion-image-2 { top: 60%; left: 20%; animation-delay: -3s; } /* final look4 */
.fashion-image-3 { top: 25%; left: 70%; animation-delay: -5s; } /* process 5 */
.fashion-image-4 { top: 70%; left: 85%; animation-delay: -2s; } /* final look3 */
.fashion-image-5 { top: 40%; left: 45%; animation-delay: -6s; } /* final look2 */
.fashion-image-6 { top: 80%; left: 5%; animation-delay: -0.5s; } /* process4 */
.fashion-image-7 { top: 10%; left: 80%; animation-delay: -4s; } /* process3 */
.fashion-image-8 { top: 75%; left: 60%; animation-delay: -7s; } /* final look1 */
.fashion-image-9 { top: 50%; left: 80%; animation-delay: -1.5s; } /* process2 */
.fashion-image-10 { top: 20%; left: 35%; animation-delay: -4.5s; } /* process1 */

/* New Images from main element - Smaller Size */
.fashion-image-11, .fashion-image-12, .fashion-image-13, 
.fashion-image-14, .fashion-image-15, .fashion-image-16, 
.fashion-image-17 {
    /* Reduce size to approx 1/4 of the original fashion images */
    max-width: 7vw;  /* Roughly 1/4 of 25vw */
    max-height: 9vh; /* Roughly 1/4 of 35vh */
    z-index: 2; /* Keep them above background but below title/zoomed images */
}

/* Specific positions for smaller main element images are now defined individually */
/* Remove the block positioning them together */
/* 
.fashion-image-11 { top: 5%; left: 50%; animation-delay: -2.5s; } 
.fashion-image-12 { top: 85%; left: 30%; animation-delay: -6.5s; } 
.fashion-image-13 { top: 30%; left: 5%; animation-delay: -0.2s; } 
.fashion-image-14 { top: 55%; left: 90%; animation-delay: -3.8s; } 
.fashion-image-15 { top: 90%; left: 70%; animation-delay: -5.2s; } 
.fashion-image-16 { top: 10%; left: 25%; animation-delay: -1.8s; } 
.fashion-image-17 { top: 45%; left: 75%; animation-delay: -7.5s; } 
*/

/* Define positions individually */
.fashion-image-11 { top: 5%; left: 50%; animation-delay: -2.5s; } /* ear1 */
.fashion-image-12 { top: 85%; left: 30%; animation-delay: -6.5s; } /* ear2 */
.fashion-image-13 { top: 30%; left: 5%; animation-delay: -0.2s; } /* eye1 */
.fashion-image-14 { top: 55%; left: 90%; animation-delay: -3.8s; } /* eye2 */
.fashion-image-15 { top: 90%; left: 70%; animation-delay: -5.2s; } /* eye3 */
.fashion-image-16 { top: 10%; left: 25%; animation-delay: -1.8s; } /* eye4 */
.fashion-image-17 { top: 45%; left: 75%; animation-delay: -7.5s; } /* lip */

@keyframes float-fashion {
    0% {
        transform: translateY(-15px) scale(1.0) rotateZ(-2deg);
        opacity: 0.8;
    }
    50% {
        transform: translateY(15px) scale(1.05) rotateZ(2deg);
        opacity: 1.0;
    }
    100% {
         transform: translateY(-15px) scale(1.0) rotateZ(-2deg);
         opacity: 0.8;
    }
}

/* --- End Fashion Section Styles --- */