/* Header Styles */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #550f9b;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
z-index: 2000; /* Increased z-index to be above lightboxes */
}

.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
display: flex;
justify-content: center;
align-items: center;
}

.nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}

.nav li {
margin: 0 15px;
}

.nav a {
text-decoration: none;
color: white;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}

/* Logo link styling - make it 20% bigger and bold */
.logo-link {
font-size: 19.2px !important; /* 20% bigger than 16px */
font-weight: bold !important;
}

/* Fancy hover effect for all navigation links */
.nav-link span, .logo-link span {
position: relative;
z-index: 1;
padding: 5px 10px;
}

.nav-link::before, .logo-link::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transform: translateX(-50%);
transition: width 0.3s ease;
border-radius: 4px;
}

.nav-link:hover::before, .logo-link:hover::before {
width: 100%;
}

/* Active button styles */
.nav-link.active, .logo-link.active {
color: white;
opacity: 1;
}

.nav-link, .logo-link {
opacity: 0.5; /* More faded by default */
transition: opacity 0.3s ease;
}

.nav-link:hover, .logo-link:hover {
opacity: 1; /* Full opacity on hover */
}

/* Base Styles */
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Space Grotesk', sans-serif;
background-color: white;
scroll-behavior: smooth;
}

body {
padding-top: 60px; /* Space for fixed header */
overflow-y: scroll; /* Ensure scrollbar always present to avoid layout shifts */
}

/* Lock body scrolling when lightbox is open */
body.no-scroll {
overflow: hidden;
}

/* Content Container Styles for One-Page Layout */
.content-container {
width: 100%;
overflow-x: hidden;
position: relative;
z-index: 1;
background-color: transparent;
}

.content-section {
min-height: auto; /* Changed from 100vh to auto to reduce unnecessary height */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 50px 20px; /* Reduced padding from 80px to 50px */
position: relative;
background-color: transparent;
margin-bottom: 10px; /* Reduced from 200px to 80px */
}

/* Transparent background class */
.transparent-bg {
background-color: transparent !important;
}

/* Home section specific adjustments */
.home-section {
padding-top: 20px; /* Reduced top padding to bring video closer to header */
justify-content: flex-start; /* Top alignment */
min-height: auto; /* Allow natural height */
}

/* Titles */
.main-title {
font-size: 50px;
margin: 0 0 30px 0;
}

.new-featured-projects-title {
font-size: 50px;
margin-bottom: 30px;
text-align: center;
}

/* REMOVED: Old .video style */
/* ADDED: New video container styles */
.video-container {
width: 78%;
position: relative;
padding-bottom: 43.875%; /* 16:9 Aspect Ratio with adjustments for border */
margin: 10px auto;
border: 7px solid #000;
z-index: 2;
background-color: transparent !important;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent !important;
}

/* About Section Content */
.content-wrapper {
display: flex;
justify-content: center;
width: 80%;
}

.about-content-container {
display: flex;
justify-content: center; /* Changed from space-between to center */
align-items: center;
width: 100%;
}

.about-text-container {
width: 80%;
max-width: 800px;
text-align: center;
}

.about-paragraph {
width: 100%;
text-align: center;
font-size: 24px;
margin: 0 auto;
line-height: 1.5;
color: black;
}

/* Contact section description */
.contact-description {
width: 90%;
max-width: 1200px;
text-align: center;
font-size: 24px;
margin: 20px auto 0;
line-height: 1.5;
color: rgba(102, 102, 102,0.8) !important;
}

/* Infinite Scroll CSS */
.infinite-scroll-wrapper {
position: relative;
width: 90%;
height: 72vh;
margin: 0 auto;
transform-origin: center;
overflow: hidden;
background-color: rgba(245, 245, 245, 0.3);
border-radius: 15px;
box-sizing: border-box;
padding: 10px;
}

.infinite-scroll-wrapper .boxes {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
perspective: 800px;
touch-action: none;
}

.infinite-scroll-wrapper .box {
position: absolute;
top: 50%;
left: 50%;
height: 26vmin;
width: 26vmin;
min-height: 260px;
min-width: 260px;
display: none;
transform-style: preserve-3d;
cursor: pointer;
}

.infinite-scroll-wrapper img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}

.infinite-scroll-wrapper .box:nth-of-type(odd) {
background: hsl(90, 80%, 70%);
}

.infinite-scroll-wrapper .box:nth-of-type(even) {
background: hsl(90, 80%, 40%);
}

.drag-proxy {
visibility: hidden;
position: absolute;
}

/* Visual Aid (Scroll Hint) */
@keyframes wiggle {
0% { transform: translateX(0); }
50% { transform: translateX(10px); }
100% { transform: translateX(0); }
}

.scroll-hint {
margin-top: 15px;
background: none;
padding: 0;
border-radius: 0;
font-size: 16px;
color: black;
z-index: 600;
display: inline-flex;
align-items: center;
gap: 12px;
animation: wiggle 0.5s infinite ease-in-out;
}

/* Lightbox Styles */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.96); /* Changed to white with 96% opacity */
display: flex;
align-items: center;
justify-content: center;
z-index: 1500; /* Below the header */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease;
cursor: pointer;
}

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

.lightbox-content {
width: 104%; /* Increased by 30% */
max-width: 1040px; /* Also increased */
background: transparent;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.lightbox-content iframe {
width: 100%;
height: 585px; /* Increased by 30% from 450px */
display: block;
}

/* Review Lightbox Styles */
.review-info {
text-align: left;
max-width: 80%;
max-height: 80vh;
overflow-y: auto;
}

.review-info h2 {
color: #550e9b;
font-size: 24px;
margin-top: 0;
margin-bottom: 5px;
}

.review-info p {
color: #666;
font-size: 16px;
margin-top: 0;
margin-bottom: 20px;
}

.review-full-content {
font-size: 18px;
line-height: 1.6;
color: #000;
}

/* Review box specific styles */
.reviews-wrapper .box {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.reviews-wrapper .box img {
object-fit: cover;
}

/* Updated Contact section styles */
.contact-subtitle {
font-size: 32px; /* Smaller than before */
margin-bottom: 20px;
font-weight: 500;
}

.contact-email {
font-size: 52px; /* Bigger than before */
margin-top: 20px;
margin-bottom: 20px;
font-weight: 600;
}

/* Scroll to top button */
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #550f9b;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s;
}

.scroll-to-top.visible {
opacity: 1;
}

/* New fragmented text styles */
/* Timeline container */
.timeline-container {
position: relative;
width: 90%;
max-width: 1000px;
margin: 30px auto;
padding: 40px 0;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

/* Main title area for fragmented text */
.timeline-container .main-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 3em;
color: black;
letter-spacing: 2px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
perspective: 500px;
}

/* Container for each letter's fragments */
.letter-container {
display: inline-block;
position: relative;
min-width: 1ch;
min-height: 1.2em;
transform-style: preserve-3d;
}

/* Override dimensions when fixed to allow natural sizing */
.letter-container.fixed {
width: auto;
height: auto;
min-width: 0;
min-height: 0;
}

/* Individual fragments */
.letter-fragment {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: black;
font-size: inherit;
line-height: 1.2;
text-align: center;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
opacity 0.4s ease-out,
clip-path 0.4s ease-out,
position 0s ease 0.4s;
will-change: transform, opacity, clip-path, position;
transform-origin: center center;
}

/* Space element */
.space-element {
display: inline-block;
width: 0.5em;
height: 1em;
}

/* Floating state (applied to fragments) */
.letter-fragment.floating {
animation: floating3D 4s ease-in-out infinite;
opacity: 0.75;
position: absolute;
}

/* Fixed state (applied to letter-container) */
.letter-container.fixed .letter-fragment:first-child {
position: relative;
width: auto;
height: auto;
animation: none;
transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) !important;
opacity: 1;
clip-path: inset(0% 0% 0% 0%) !important;
}

/* Hide subsequent fragments when fixed */
.letter-container.fixed .letter-fragment:not(:first-child) {
display: none;
}

/* Floating Animation (3D) */
@keyframes floating3D {
0% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); }
25% { transform: translate3d(calc(var(--tx, 0px) + 3px), calc(var(--ty, 0px) - 4px), calc(var(--tz, 0px) + 5px)) rotateX(calc(var(--rx, 0deg) - 2deg)) rotateY(calc(var(--ry, 0deg) + 3deg)) rotateZ(calc(var(--rz, 0deg) + 2deg)); }
50% { transform: translate3d(calc(var(--tx, 0px) - 2px), calc(var(--ty, 0px) + 5px), calc(var(--tz, 0px) - 3px)) rotateX(calc(var(--rx, 0deg) + 1deg)) rotateY(calc(var(--ry, 0deg) - 2deg)) rotateZ(calc(var(--rz, 0deg) - 3deg)); }
75% { transform: translate3d(calc(var(--tx, 0px) + 1px), calc(var(--ty, 0px) - 2px), calc(var(--tz, 0px) + 4px)) rotateX(calc(var(--rx, 0deg) + 3deg)) rotateY(calc(var(--ry, 0deg) + 1deg)) rotateZ(calc(var(--rz, 0deg) + 1deg)); }
100% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); }
}

/* Playhead Styling */
.playhead {
position: absolute;
top: 25%;
left: 0; /* Start from the left side */
width: 3px;
height: 4em;
background-color: #550f9b;
cursor: grab;
z-index: 5;
}

.playhead.dragging {
animation: none;
}

.playhead:active {
cursor: grabbing;
}

.playhead-arrow {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
font-size: 28px;
color: #550f9b;
line-height: 1;
}

/* Playback Controls */
.playback-controls {
display: flex;
justify-content: center;
margin-top: 10px;
}

.playback-controls button {
background-color: rgba(255, 255, 255, 0.8);
color: #550f9b;
border: none;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}

#toggleButton {
border-radius: 0; /* Square button */
}

.playback-controls button:hover {
background-color: rgba(255, 255, 255, 0.9);
}

.playback-controls button:focus {
outline: none;
}

/* Footer */
.footer {
background-color: white; /* Changed to white background */
padding: 20px;
text-align: center;
font-size: 14px;
color: black; /* Changed to black text */
}

.footer p {
margin: 0;
}

/* Animated Background Styles */
:root {
--color1: 138, 43, 226; /* Purple */
--color2: 147, 112, 219; /* Medium Purple */
--color3: 186, 85, 211; /* Medium Orchid */
--color4: 218, 112, 214; /* Orchid */
--color5: 221, 160, 221; /* Plum */
--color-interactive: 152, 51, 236; /* Brighter Purple */
--circle-size: 80%;
--blending: hard-light;
}

.gradient-bg {
width: 100vw;
height: 100vh;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
z-index: -2; /* Changed from -1 to -2 to be behind the white overlay */
background-color: white;
}

/* White overlay with 96% opacity */
.content-container::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
z-index: -1;
pointer-events: none;
}

.gradient-bg svg {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
}

.gradient-bg .gradients-container {
filter: url(#goo) blur(40px);
width: 100%;
height: 100%;
}

.g1 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2);
left: calc(50% - var(--circle-size) / 2);
transform-origin: center center;
animation: moveVertical 30s ease infinite;
opacity: 0.7;
}

.g2 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2);
left: calc(50% - var(--circle-size) / 2);
transform-origin: calc(50% - 400px);
animation: moveInCircle 20s reverse infinite;
opacity: 0.7;
}

.g3 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2 + 200px);
left: calc(50% - var(--circle-size) / 2 - 500px);
transform-origin: calc(50% + 400px);
animation: moveInCircle 40s linear infinite;
opacity: 0.7;
}

.g4 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2);
left: calc(50% - var(--circle-size) / 2);
transform-origin: calc(50% - 200px);
animation: moveHorizontal 40s ease infinite;
opacity: 0.5;
}

.g5 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: calc(var(--circle-size) * 2);
height: calc(var(--circle-size) * 2);
top: calc(50% - var(--circle-size));
left: calc(50% - var(--circle-size));
transform-origin: calc(50% - 800px) calc(50% + 200px);
animation: moveInCircle 20s ease infinite;
opacity: 0.6;
}

.interactive {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: 100%;
height: 100%;
top: -50%;
left: -50%;
opacity: 0.5;
}

@keyframes moveInCircle {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}

@keyframes moveVertical {
0% {
transform: translateY(-50%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(-50%);
}
}

@keyframes moveHorizontal {
0% {
transform: translateX(-50%) translateY(-10%);
}
50% {
transform: translateX(50%) translateY(10%);
}
100% {
transform: translateX(-50%) translateY(-10%);
}
}