/* ─────────────────────────────────────────────────────────────
   1. FONT IMPORT & GLOBAL RESETS
   ───────────────────────────────────────────────────────────── */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

   * {
     font-family: 'Montserrat', sans-serif !important;
   }
   
   body.index-page {
    margin:0;
    padding-top: 900px;
  }
  
  body:not(.index-page) {
    margin:0;
    padding-top: 0; 
  }
  
   /* ─────────────────────────────────────────────────────────────
      2. NAVIGATION BAR
      ───────────────────────────────────────────────────────────── */
   .nav-header {
     position: fixed;
     top: 0;
     width: 100%;
     height: 100px; /* Default height */
     background-color: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     opacity: 0; /* Initially hidden */
     transform: translateY(-20px); /* Starts slightly above */
     animation: fadeInNavbar 0.6s ease-out forwards;
     transition: height 0.3s ease-in-out, background-color 0.5s ease-in-out;
   }
   
   /* On scroll, change to semi‑transparent black */
   .nav-header.scrolled {
     background-color: rgba(0, 0, 0, 0.8);
   }
   
   /* Navbar Fade-In Animation */
   @keyframes fadeInNavbar {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
   }
   
   .nav-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 0 20px;
     text-transform: uppercase;
     font-size: 20px;
     position: relative;
   }
   
   /* Centered Title */
   .nav-left {
     position: absolute;
     left: 20px;
     font-weight: bold;
     font-size: 18px;
     display: block;
     color: white;
     order: 1; /* Ensure it's first */
   }
   
   .nav-center {
     flex: 1;
     text-align: center;
     font-size: 30px;
     font-weight: bold;
     color: white;
     order: 2; /* Ensure it's centered */
   }
   
   .nav-right {
     display: flex;
     align-items: center;
     gap: 15px;
     color: white;
     order: 3; /* Ensure it's last */
   }
   
   .section-name {
     font-size: 18px;
     font-weight: bold;
     color: white;
     text-transform: uppercase;
     transition: all 0.3s ease-in-out;
     display: block;
   }
   
   /* ─────────────────────────────────────────────────────────────
      3. HAMBURGER MENU
      ───────────────────────────────────────────────────────────── */
   .hamburger-menu {
     font-size: 36px;
     cursor: pointer;
     color: white;
     transition: color 0.2s ease-in-out, font-size 0.3s ease-in-out;
   }
   
   .hamburger-menu:hover {
     color: #f1c40f;
   }
   
   /* ─────────────────────────────────────────────────────────────
      4. HAMBURGER OVERLAY
      ───────────────────────────────────────────────────────────── */
   .hamburger-overlay {
     height: 100%;
     width: 100%;
     position: fixed;
     top: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(0px);
     transition: backdrop-filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
     z-index: 1100;
     opacity: 0;
     pointer-events: none;
   }
   
   .hamburger-overlay.active {
     backdrop-filter: blur(10px);
     opacity: 1;
     pointer-events: all;
   }
   
   /* Overlay content slides in from the right */
   .overlay-content {
     position: absolute;
     top: 50%;
     right: -100%;
     transform: translateY(-50%);
     width: auto;
     text-align: left;
     padding-right: 20px;
     color: white;
     transition: right 0.5s ease-out;
   }
   
   .hamburger-overlay.active .overlay-content {
     right: 20px;
   }
   
   .overlay-content a.active {
     color: rgba(255, 255, 255, 0.5) !important; /* Lighten color */
     font-weight: 700 !important; /* Make it bold */
     cursor: default !important; /* Remove pointer */
     transition: all 0.3s ease-in-out;
   }
   
   .overlay-content a.active:hover {
     color: rgba(255, 255, 255, 0.3) !important; /* Reduce brightness slightly */
     text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6); /* Subtle glow effect */
   }
   
   /* Ensure Montserrat in overlay text */
   .hamburger-overlay,
   .overlay-content a {
     font-family: 'Montserrat', sans-serif !important;
   }
   
   /* Overlay links with rainbow hover effect */
   .overlay-content a {
     padding: 15px;
     text-decoration: none;
     letter-spacing: 0.05em;
     font-size: 30px;
     display: block;
     position: relative;
     background-image: linear-gradient(
       90deg,
       #ff7f7f, #ffaf5f, #fffa75, #85ff85,
       #5fd3ff, #8f7fff, #e07fff, #ff7f7f
     );
     background-size: 300% 100%;
     background-clip: text;
     -webkit-background-clip: text;
     color: white;
     transition: color 0.3s ease-in-out;
   }
   
   /* Looping rainbow effect on hover */
   .overlay-content a:hover {
     color: transparent;
     animation: rainbowAnimation 2s linear infinite;
   }
   
   /* ─────────────────────────────────────────────────────────────
      5. CLOSE BUTTON
      ───────────────────────────────────────────────────────────── */
   .closebtn {
     position: absolute;
     top: 20px;
     right: 20px;
     font-size: 40px;
     color: white;
     text-decoration: none;
     cursor: pointer;
     transition: color 0.2s ease-in-out;
   }
   
   .closebtn:hover {
     color: #f1c40f;
   }
   
   /* ─────────────────────────────────────────────────────────────
      6. VIDEO BACKGROUND
      ───────────────────────────────────────────────────────────── */
   .video-bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -1;
     filter: brightness(1);
     transition: filter 0.3s ease-in-out;
   }
   
   /* ------------------------------------------------------------------
      7. IMAGE GRID
      ------------------------------------------------------------------ */
   .image-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 15px;
     width: 100%;
     max-width: 99999px;
     margin: 100px auto 0; /* 100px top margin to push down from nav */
     margin-top: 0 !important;
     padding-top: 0 !important;
     padding: 0 20px;
     box-sizing: border-box;
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
   }
   
   /* Show the grid items once triggered */
   .image-grid.show {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* Grid items */
   .grid-item {
     position: relative;
     overflow: hidden;
     aspect-ratio: 16/9; /* Maintain aspect ratio */
     cursor: pointer;
     border-radius: 5px;
     opacity: 0;
     transform: translateY(5px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
     width: 100%; /* Allow full grid stretch */
     max-width: fit-content;
     height: auto; /* Remove fixed height */
     max-height: none; /* Ensure it's not restricted */
   }
   
   .grid-item.show {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* Hover Effect - Animate Border & Scale Grid Item */
   .grid-item:hover {
     transform: scale(1.01); /* Subtle scale */
     box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3); /* Glowing effect */
     outline: 0px !important;
   }
   
   /* Animated Border Effect */
   .grid-item::before {
     content: "";
     position: absolute;
     inset: 0;
     border: 2px solid white;
     border-radius: 5px;
     opacity: 0;
     transform: scale(1.01);
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
   }
   
   /* Images/Videos inside grid items */
   .grid-item img,
   .grid-item video {
     width: 100%;
     height: 100%;
     object-fit:cover;
     border-radius: 8px;
     transition: transform 0.5s ease;
   }
   
   .grid-item:hover img,
   .grid-item:hover video {
     transform: none;
   }
   
   .grid-video {
     display: none;
     pointer-events: none;
     grid-template-columns: repeat(2, 1fr);
   }
   
   /* Grid overlay text */
   .overlay {
     position: absolute;
     bottom: 30px;
     left: 10px;
     background: none;
     padding: 5px 10px;
     color: white;
     text-align: left;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s ease;
   }
   
   .grid-item:hover .overlay {
     opacity: 1;
   }
   
   .overlay p {
     font-size: 1rem;
     font-weight: bold;
     margin: 0;
     padding: 0;
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
   }
   
   .overlay a {
     display: none;
   }
   
   .overlay a:hover {
     background: white;
     color: black;
   }
   
   /* Adjustments for clientwork-page */
   body.clientwork-page .image-grid {
     position: static;
     margin: 120px auto 0;
     max-width: 100%;
     width: 90%;
     min-height: 100vh;
     overflow: hidden;
   }
   
   /* ─────────────────────────────────────────────────────────────
      8. ABOUT ME SECTION
      ───────────────────────────────────────────────────────────── */
   .aboutme {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 50%;
     text-align: center;
     color: white;
     padding: 20px;
     border-radius: 10px;
     font-size: 25px;
     opacity: 0;
     transform: translateY(20px);
     animation: fadeIn 0.8s ease-out forwards;
   }
   
   /* ─────────────────────────────────────────────────────────────
      9. AWARDS SECTION
      ───────────────────────────────────────────────────────────── */
   .awards-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: absolute;
     bottom: 10%;
     left: 50%;
     transform: translateX(-50%);
     width: 60%;
     text-align: center;
     gap: 20px;
   }
   
   .award {
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 15px;
     color: white;
     background: rgba(0, 0, 0, 0.6);
     padding: 15px;
     border-radius: 10px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
     transform: translateY(20px);
     transition: transform 0.3s ease-in-out;
   }
   
   .award:hover {
     transform: translateY(0);
   }
   
   /* ─────────────────────────────────────────────────────────────
      10. ANIMATIONS & KEYFRAMES
      ───────────────────────────────────────────────────────────── */
   @keyframes rainbowAnimation {
     0%   { background-position: 0% 50%; }
     50%  { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
   }
   
   @keyframes fadeIn {
     from {
       opacity: 0;
       transform: translate(-50%, -50%) scale(0.9);
     }
     to {
       opacity: 1;
       transform: translate(-50%, -50%) scale(1);
     }
   }
   
   /* Fade-in for elements on page load */
   .fade-in {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 1s ease-out, transform 1s ease-out;
   }
   
   .fade-in.show {
     opacity: 1;
     transform: translateY(0);
   }

   
   
   /* ─────────────────────────────────────────────────────────────
      11. MEDIA QUERIES
      ───────────────────────────────────────────────────────────── */
   @media (max-width: 768px) {
     .nav-container {
       display: flex !important;
       justify-content: space-between !important;
       align-items: center !important;
       padding: 0 15px !important;
       width: 100% !important;
       position: relative !important;
     }
   
     /* Moves Your Name (nav-center) to the Left */
     .nav-center {
       text-align: left !important;
       flex: none !important;
       order: 1 !important;
     }
   
     /* Moves Section Name (nav-left) to the Right, Before Hamburger */
     .nav-left {
       position: static !important;  /* Remove absolute positioning */
       order: 1 !important;          /* Moves it after the name */
       margin-right: 15px !important;
     }
   
     /* Keeps Hamburger on the Far Right */
     .nav-right {
       order: 3 !important;
     }
     .nav-center{
      font-size: 18px !important;
     }
   }
   
   /* Fixing Image Grid Behavior */
   .image-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* Default: 2 columns */
     gap: 15px;
     width: calc(100% - 20px);
     max-width: 100%;
     padding: 0;
     margin-top: 0vh;
     position: relative !important;
     top: auto !important;
     justify-content: center;
     transition: all 0.3s ease-in-out;
   }
   
   @media (min-width: 769px) {
     .image-grid {
       grid-template-columns: repeat(2, 1fr) !important;
     }
   }
   
   @media (max-width: 768px) {
     .image-grid {
       grid-template-columns: 1fr !important; /* Force 1 column below 768px */
     }
   }
   
   /* Keep the section name in its original position */
   .section-name {
     display: block;
     font-size: 18px;
     color: white;
     text-transform: uppercase;
     font-weight: bold;
     white-space: nowrap;
   }
   
   .nav-center {
     text-align: center;
     flex: 1;
     font-size: 22px;
     transition: all 0.3s ease-in-out;
   }
   
   .hamburger-menu {
     font-size: 32px;
   }
   
   .image-grid {
     grid-template-columns: 1fr;
     width: 100%;
     padding: 0 10px;
   }
   
   .aboutme {
     width: 85%;
     font-size: 16px;
     padding: 10px;
   }
   
   /* ─────────────────────────────────────────────────────────────
      CUSTOM CURSOR STYLING
      ───────────────────────────────────────────────────────────── */
      /*
   .custom-cursor {
     width: 10px;
     height: 10px;
     background-color: white;
     border: 1px solid black; 
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 10000;
     transform: translate(-50%, -50%);
     transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
   }
   
   .custom-cursor.click {
     transform: translate(-50%, -50%) scale(2);
     transition: transform 0.1s ease-in-out;
   }
   
   .custom-cursor.hover {
     transform: translate(-50%, -50%) scale(1.6);
     background-color: rgba(255, 255, 255, 0.8);
   }
   
   
   *, *::before, *::after {
     cursor: none !important;
   }
   */

   /* ─────────────────────────────────────────────────────────────
      PAGE-SPECIFIC OVERRIDES (edits-page & clientwork-page)
      ───────────────────────────────────────────────────────────── */
   /* Disable animations on edits & clientwork pages */
   body.edits-page .image-grid,
   body.clientwork-page .image-grid {
     opacity: 1 !important;
     transform: translateY(0) !important;
     transition: none !important;
   }
   
   body.edits-page .grid-item,
   body.clientwork-page .grid-item {
     opacity: 1 !important;
     transform: translateY(0) !important;
     transition: none !important;
   }
   
   /* Ensure nav bar is fully visible on edits.html and clientwork.html */
   body.edits-page .nav-header,
   body.clientwork-page .nav-header {
     opacity: 1 !important;
     transform: translateY(0) !important;
     background-color: black !important;
   }
   
   /* Fully opaque nav bar on scroll */
   .nav-header.scrolled {
     background-color: rgba(0, 0, 0, 1) !important; /* Fully black */
     opacity: 1 !important;
   }
   
   /* Solid black background on edits.html & clientwork.html */
   body.edits-page,
   body.clientwork-page {
     background: black !important;
     background-color: black !important;
     color: white !important; /* Ensure all text is white */
   }
   
   /* Hide any unexpected background elements */
   body.edits-page .background,
   body.clientwork-page .background,
   body.edits-page video.video-bg,
   body.clientwork-page video.video-bg {
     display: none !important;
   }
   
   /* ─────────────────────────────────────────────────────────────
      MODAL STYLING
      ───────────────────────────────────────────────────────────── */
   /* Modal Overlay - Fade In */
   .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
     display: none;
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     z-index: 999;
   }
   
   .modal-overlay.active {
     display: block;
     opacity: 1;
   }
   
   /* Modal - Pop-in Animation */
   .modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.85);
     width: 80%;
     max-width: 500px;
     background: rgba(255, 255, 255, 0.1); /* Semi-transparent */
     backdrop-filter: blur(10px);
     padding: 20px;
     border-radius: 10px;
     text-align: center;
     color: white;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
     display: none;
     opacity: 0;
     transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-in-out;
     z-index: 1000;
   }
   
   .modal.active {
     display: block;
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }
   
   /* Closing Animation */
   .modal.closing {
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.9);
   }
   
   .modal-overlay.closing {
     opacity: 0;
   }
   
   /* ─────────────────────────────────────────────────────────────
      BOUNCING LINE INDICATOR
      ───────────────────────────────────────────────────────────── */
   #bouncing-line {
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
     color: #fff;
     font-size: 80px;
     font-weight: 800;
    /*  width: 4px; 
     height: 80px; 
     background: white;
     box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
     transform: translateX(-50%);
     animation: bounce 1.5s infinite ease-in-out;
     transition: opacity 0.5s ease-in-out; */
     
   }
   
   /* Bouncing Animation (Vertical Movement) */
   @keyframes bounce {
     0%, 100% {
       transform: translateX(-50%) translateY(0);
     }
     50% {
       transform: translateX(-50%) translateY(-15px); /* Moves up */
     }
   }
   
   /* Hide the line when fading out */
   #bouncing-line.hidden {
     opacity: 0;
   }
   

   .effect-text-gradient {
    position: relative;
    transition: all 0.4s ease;
  }
  .effect-text-gradient::after {
    content: attr(data-gradient-text);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    background: linear-gradient(90deg, #9081fa, #1afffe, #eddd1b, #fd8f50, #fa3335, #9081fa);
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: animate-gradient 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .effect-text-gradient:hover::after {
    opacity: 1;
  }
  
  @keyframes animate-gradient {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -400% 0;
    }
  }
  

  /* PAGE TRANSITION */

/*   body.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  body {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  body.loaded {
    opacity: 1;
  }
 */