body {
  background-color: black;
  color: white;
  font-family: 'Zilla Slab','Courier New', monospace !important;
}

/* Navigation */
.nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: rgba(220, 19, 19, 0.868);
  transform: scale(1.05);
  color: aqua;
}

.nav-link.active {
  box-shadow: 0 0 8px 3px #f43f5e; /* glowing red */
  color: #f43f5e;
}

.nav-link.active:hover {
  background-color: rgba(220, 19, 19, 0.868);
  transform: scale(1.05);
  color: aqua;
}

.mobile-link {
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.mobile-link:hover {
  color: #f43f5e;
  
}

/* Hero Section */
.hero {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.hero-text {
  font-size: clamp(1rem, 10vw, 1rem);
  color: #ff0000;
  z-index: 10;
  text-transform: uppercase;
  white-space: nowrap;
}

/*Work Section  */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 25s linear infinite;
}

.marquee-text {
  color: #6b7280;
  /* Tailwind gray-500 */
  font-size: 3.5rem;
  /* text-2xl */
  font-weight: 600;
  margin-right: 3rem;
  /* spacing between words */
  white-space: nowrap;
}
/*  */

/* Text Fade in animation */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(20px);
}
/*  */


/* Split animation */
.split-container {
  width: 9.25em;
  height: 1.15em;
  font-size: 4rem;
  font-family: sans-serif;
  position: relative;
  margin: 100px auto;
  cursor: pointer;
}

/* Shared styles */
.split-container div {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  transition: all 0.6s ease-in-out;
}

.split-upper {
  top: 0;
  height: 52.5%;
  z-index: 3;
  overflow: hidden;
  color: #ffffff;
  background-color: #000;
}

.split-lower {
  bottom: 0;
  height: 100%;
  color: transparent;
  background: linear-gradient(180deg, #121212 52.5%, #ffffff 52.5%);
  background-clip: text;
  -webkit-background-clip: text;
  z-index: 1;
}

.split-inside {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  z-index: 2;
  font-size: 1rem;
  color: #dc143c;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 🔥 Hover animation */
.split-container:hover .split-upper {
  transform: translateY(-45px);
}

.split-container:hover .split-lower {
  transform: translateY(30px);
}

.split-container:hover .split-inside {
  opacity: 1;
  transform: translateY(-200%);
}

/* Mobile responsiveness */
@media (max-width: 424px) {
  .split-container {
    font-size: 2.5rem;
  }

  .split-inside {
    font-size: 0.75rem;
  }
}

@media (max-width: 320px) {
  .split-container {
    font-size: 2rem;
  }

  .split-inside {
    font-size: 0.5rem;
  }
}

/* =============== */

/* About section */

/* style.css */
.parallax-scroll {
  will-change: transform;
}
/* ============= */

/* Card Stacking */

:root {
  --card-height: 350px;
  --stack-top: 100px;
  /* Where the card "sticks" to the viewport */
  --card-gap: 50px;
  /* Vertical space between cards */
}

/* --- Scroll Spacers (Allows the stacking animation space to operate) --- */
.spacer-top {
  /* Ensures initial scroll space before cards start sticking */
  height: 10vh;
}

.spacer-bottom {
  /* Ensures the last card can scroll completely into view/unstack */
  height: 100vh;
}

.stack-cards {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stack-card__item {
  height: var(--card-height);
  margin-bottom: var(--card-gap);
  /* KEY PROPERTY: Pins the element during scroll */
  position: sticky;
  top: var(--stack-top);
  transform-origin: center top;
  transition: transform 0.5s ease-out;
  /* Smooth transition for the JS scale/translate */
}

/* --- Card Content Layout (Text Left, Image Right) --- */
.card-content {
  display: flex;
  background-color: rgb(0, 0, 0);
  border: 0.85px solid aqua;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(231, 231, 231, 0.08);
  overflow: hidden;
  height: 100%;
}

.text-area {
  flex: 1;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #333;
}

.text-area h3 {
  font-size: 1.8em;
  margin-top: 0;
  color: hwb(0 71% 29%);
}
.text-area p{
  font-size: 1em;
  line-height: 1.6;
  color: hwb(0 42% 58%);
}
.image-area {
  flex: 1;
  max-width: 40%;
  overflow: hidden;
}

.image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ============= */

/* Masonry */
/* --- Masonry Grid using CSS Columns --- */
.masonry-grid {
  /* Use CSS columns to create the masonry effect */
  column-count: 3;
  /* 3 columns for desktop */
  column-gap: 1.5rem;
  /* Gap between columns */
}

/* Ensure images span across the columns correctly and don't break */
.masonry-grid img {
  break-inside: avoid;
  display: block;
  /* Important for column breaks */
  width: 100%;
  /* Fill the column width */
  /* Add subtle transition for hover effects if desired */
  transition: transform 0.3s ease;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 1024px) {
  .masonry-grid {
    column-count: 2;
    /* 2 columns for tablets/medium screens */
  }
}

@media (max-width: 640px) {
  .masonry-grid {
    column-count: 1;
    /* 1 column for mobile */
  }
}

/* --- Tab Active/Inactive Styles (Ensure these match your Tailwind HTML structure) --- */

.tab-link {
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Base style for inactive tabs (overrides Tailwind hover on active tab) */
.tab-link:not(.active) {
  color: #6b7280;
  /* text-gray-500 */
}

/* Styles for the visually active tab *//* --- Social Icon Filter Effect --- */

.social-icon-link svg {
  /* Apply the grayscale filter by default */
  filter: grayscale(100%);

  /* Add a smooth transition for both the color change (fill) and the filter change */
  transition: filter 0.5s ease, color 0.5s ease;

  /* Optional: Scale down slightly to make the hover effect more dramatic */
  transform: scale(1);
}

.social-icon-link:hover svg {
  /* Remove the grayscale filter on hover to reveal the full color */
  filter: grayscale(0%);

  /* Optional: Scale up slightly on hover */
  transform: scale(1.1);

  /* Set the color to white or the desired hover color for general icons.
       For true social color, you'd target individual icons, but the filter 
       alone often makes the icons feel like they are "lighting up". */
  color: white;
}
.tab-link.active {
  color: #2563eb;
  /* text-blue-600 */
  background-color: #f3f4f6;
  /* bg-gray-100 */
  font-weight: 500;
}

/* ============= */