body {
    padding-top: var(--bs-navbar-height, 56px);
    position: relative; /* Needed for stacking */
    background-color: #fafafa; /* This is now the main background */
    overflow-x: hidden; /* Prevents blobs from causing a scrollbar */
}

body::before {
   content: '';
   position: fixed; /* ⬅️ Key change: Stays fixed on scroll */
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
   opacity: 0.3; /* You can still adjust this */
   filter: blur(100px);
   top: -200px;
   left: -200px;
   z-index: -1; /* ⬅️ Key change: Puts it behind everything */
}

body::after {
   content: '';
   position: fixed; /* ⬅️ Key change: Stays fixed on scroll */
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
   opacity: 0.25; /* You can still adjust this */
   filter: blur(120px);
   bottom: -150px;
   right: -100px;
   z-index: -1; /* ⬅️ Key change: Puts it behind everything */
}

.navbar {
  transition: background-color 0.3s ease;
}

#carouselExampleIndicators {
  max-width: 1920px;
  margin: 0 auto;
}

.carousel-item img {
  height: 80vh;
  object-fit: cover;
  border-radius: 12px;
}

.navbar-collapse {
  justify-content: center;
}

/* Nav links style */
.navbar-nav {
  gap: 40px; /* space between links */
  align-items: center;
}

.nav-link {
  position: relative; /* Needed to position the line relative to the text */
  font-size: 1.25rem; /* Increased font size (approx 20px) */
  font-weight: 500;   /* Make it slightly bolder */
  color: #555 !important; /* Default color */
  padding-bottom: 5px; /* Space for the line */
  transition: color 0.3s ease;
}


.nav-link:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px; /* Thickness of the line */
  bottom: 0;
  left: 0;
  background-color: #000; /* Color of the line */
  transition: width 0.3s ease-in-out; /* Animation speed */
}


.nav-link:not(.dropdown-toggle):hover::after {
  width: 100%; 
}


.nav-link:not(.dropdown-toggle).after {
  width: 100%;
}
.dropdown-menu {
  background-color: rgba(0, 0, 0, 0.9);
}

.dropdown-item {
  color: white;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* --- Welcome Section --- */
.welcome-section {
  /* This makes the section fill the screen */
  min-height: 100vh; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  background-color: transparent; /* Simple white background */
}

.welcome-section .container {
  position: relative;
  z-index: 2;
}

.welcome-left-text,
.welcome-right-links {
  z-index: 2; /* These already have 'position: absolute', so they just need z-index */
}

#skills-marquee {
  z-index: 2; /* This also has 'position: absolute', so it just needs z-index */
}

.welcome-left-text {
  position: absolute; /* Pins this element to the .welcome-section */
  left: 50px; /* 50px from the left edge of the section */
  top: 50%; /* Starts 50% from the top */
  transform: translateY(-50%); /* Moves it up by half its own height to be perfectly centered */

  /* --- Styling for the vertical text --- */
  font-weight: 600;
  color: #aaa; /* A light gray color */
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.welcome-right-links {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  
  display: flex; /* We'll use flexbox... */
  flex-direction: column; /* ...to stack the links vertically */
  align-items: flex-end; /* Aligns text to the right, optional */
  gap: 20px; /* Space between the links */
}

.welcome-right-links a {
  color: #333; /* Black text */
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
}

.welcome-right-links a:hover {
  color: #000;
}

.welcome-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(5rem, 5vw, 7.5rem);
  font-weight: 700;
  color: #222;
  margin-bottom: 2rem;
}

.welcome-subheadline {
  font-size: 1.5rem;
  color: #555;
  margin-bottom: 5rem; /* Adds space before the link */
}

/* --- Welcome Section Animations --- */

/* 1. This defines the animation "recipe" */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. This applies the animation to each element with a different delay */

.welcome-headline {
  /* This runs the animation named "fadeInUp" */
  animation: fadeInUp 0.8s ease-out;
  
  /* This prevents the text from "flashing" before the animation starts */
  animation-fill-mode: backwards;
  
  /* This is the delay */
  animation-delay: 0.2s;
}

.welcome-subheadline {
  animation: fadeInUp 0.8s ease-out backwards;
  animation-delay: 0.5s; /* Starts after the headline */
}

.welcome-link {
  animation: fadeInUp 0.8s ease-out backwards;
  animation-delay: 0.8s; /* Starts after the subheadline */
}

/* This targets both side elements and animates them together */
.welcome-left-text,
.welcome-right-links {
  animation: fadeInUp 0.8s ease-out backwards;
  animation-delay: 1.1s; /* Starts last */
}

/* --- About me Link --- */
.welcome-link {
  font-size: 1.25rem;
  font-weight: 500; 
  color: #555 !important;
  text-decoration: none; /* Removes default underline */

  /* --- Copied from .nav-link for animation --- */
  position: relative;
  padding-bottom: 5px;
  transition: color 0.3s ease;
}

/* The animated line */
.welcome-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transition: width 0.3s ease-in-out;
}

/* The hover effect */
.welcome-link:hover::after {
  width: 100%;
}

/* Optional: hover color change */
.welcome-link:hover {
  color: #000 !important;
}


/* About me Styling Section */
.about-section {
background-color: transparent;
  color: #8b8b8b;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh; 
  display: flex;
  align-items: center; 
  padding-top: 80px;
  padding-bottom: 100px;
  overflow: hidden;
}

.about-section .welcome-link.animate-delay {
  display: inline-block; /* Ensures transform works correctly */
  opacity: 0;
  transform: translateY(30px);
  /* This delay (0.5s) makes it appear after the paragraph (0.3s) */
  transition: all 0.8s ease-out 0.5s; 
}

.about-section .welcome-link.animate-delay.visible {
  opacity: 1;
  transform: translateY(0);
}

.tagline h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1.1;
  margin: 0;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

#changing-text {
  transition: opacity 0.6s ease;
}

.tagline-highlight {
  color: #000;
  font-size: clamp(3rem, 7vw, 7rem);
  position: relative;
}

.tagline-highlight::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background-color: #111;
  border-radius: 2px;
  opacity: 0.1;
}

.about-text {
  font-size: 1rem;
  color: #333;
  line-height: 1.8;
  max-width: 700px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out 0.3s;
}

.about-photo {
  max-width: 600px;
  object-fit: cover;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(30px);
}

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

/*My Works*/

.project-img-wrapper {
  overflow: hidden; /* Hides the image parts that go outside the box when zooming */
  border-radius: 0.5rem;
  cursor: pointer;
}

/* The Image itself */
.project-img-wrapper img {
  transition: transform 0.5s ease; /* Smooth animation */
  width: 100%;
  cursor: zoom-in;
}

/* What happens when you hover */
.project-img-wrapper:hover img {
  transform: scale(1.05); /* Zooms in slightly by 5% */
}

@media (max-width: 768px) {
  .project-item {
    text-align: center; /* Centers text on mobile */
  }
  .project-item .p-4 {
    padding: 1.5rem 0 !important; /* Removes side padding on mobile */
  }
}

/* --- Lightbox Styles --- */
.lightbox-overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Stays in place */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
  
  /* These 3 lines center the image */
  align-items: center;
  justify-content: center;
  
  z-index: 1050; /* Make sure it's on top of everything */
  cursor: zoom-out; /* Show a "zoom out" cursor on the background */
}

/* 3. Style the image inside the lightbox */
.lightbox-image {
  max-width: 90vw;  /* 90% of the viewport width */
  max-height: 90vh; /* 90% of the viewport height */
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  cursor: default; /* The image itself has a normal cursor */
}

/*Contact Me*/
#contact {
  background-color: transparent;
  color: #222;
}

#contact h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
}

#contact p {
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.contact-btn {
  background-color: #000;       /* filled black button */
  color: #fff !important;       /* white text */
  border: none;                 /* removes dark outline */
  border-radius: 50px;
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  background-color: #333;       /* slightly lighter black on hover */
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#contact .d-flex {
  justify-content: center !important;  /* fully center all buttons */
}

/* --- Marquee Section --- */
#skills-marquee {
  /* This pins it to the bottom of the welcome-section */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* Make it span the full width */
  
  /* These are from your original image, not the code */
  background-color: transparent; /* Makes it see-through */
  border: none; /* Removes the lines */
  
  overflow: hidden; 
  padding: 70px 0;
}

.marquee-container {
  display: flex; /* Lines up the two content blocks side-by-side */
  white-space: nowrap; /* Ensures they stay on one line */
  animation: marquee-scroll 60s linear infinite;
}

.marquee-content {
  flex-shrink: 0; /* Prevents the content from shrinking */
}

.marquee-content span {
  font-family: 'Poppins', sans-serif; /* ⬅️ Added for consistency */
  font-size: 2.5rem;                 /* ⬅️ Reduced from 2.5rem */
  font-weight: 500;                  /* ⬅️ Reduced from 600 (Regular, not bold) */
  text-transform: uppercase;
  color: #aaa;                      /* ⬅️ Changed from #222 (much lighter) */
  letter-spacing: 1.5px;
  word-spacing: 15px;
  padding: 0 20px;
}
/*Animation*/

.animate.visible, .animate-delay.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Moves the content block left by its own full width */
    transform: translateX(-50%);
  }
}

/* --- My Works Scroll Animation --- */

/* 1. Initial State: Hidden and pushed down */
#works .animate {
  opacity: 0;
  transform: translateY(50px); /* Pushes it down 50px */
  transition: all 0.8s ease-out; 
}

/* 2. Visible State: Controlled by your existing JavaScript */
#works .animate.visible {
  opacity: 1;
  transform: translateY(0); /* Returns to original position */
}

/* Slight delay */
#works .project-item:nth-of-type(2) {
  transition-delay: 0.2s;
}