/* ========================================= */
/* BASE & SCROLLBAR                          */
/* ========================================= */
html, body { 
  scroll-behavior: smooth; 
  overflow-x: hidden !important; 
  max-width: 100vw; 
  width: 100%;
  position: relative;
}
body { 
  font-family: 'Outfit', sans-serif; 
  background: #fafafa; 
  color: #111827; 
}
h1, h2, h3, h4, h5 { font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; }
.font-serif-luxury { font-family: 'Playfair Display', serif; font-style: italic; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #111827; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #374151; }

/* ========================================= */
/* SMART FLOATING NAVBAR                     */
/* ========================================= */
#navbar { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-floating {
  max-width: 950px !important;
  border-radius: 100px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: saturate(200%) blur(24px);
  -webkit-backdrop-filter: saturate(200%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  padding: 0.6rem 1.5rem !important;
  margin-top: 20px !important;
}
.nav-link {
  padding: 8px 18px; border-radius: 50px; color: #4b5563; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease;
}
.nav-link:hover { background: rgba(0, 0, 0, 0.05); color: #000; transform: translateY(-1px); }

/* ========================================= */
/* ADVANCED ANIMATIONS (NEW)                 */
/* ========================================= */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes float-slow {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float { animation: float-slow 6s ease-in-out infinite; }

/* ========================================= */
/* PREMIUM BUTTONS & GLOWS                   */
/* ========================================= */
.btn-premium {
  background: linear-gradient(135deg, #000000, #374151);
  transition: all 0.4s ease; position: relative; overflow: hidden; z-index: 1;
}
.btn-premium::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: all 0.6s ease; z-index: -1;
}
.btn-premium:hover::before { left: 100%; }
.btn-premium:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); }

.hero-gradient { 
  background: linear-gradient(135deg, #000000 0%, #4b5563 50%, #111827 100%); 
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
}

/* ========================================= */
/* FORMS & INPUTS                            */
/* ========================================= */
.glass-form {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}
.premium-input {
  width: 100%; padding: 14px 20px; border-radius: 12px; border: 1px solid #e5e7eb;
  background: rgba(255,255,255,0.9); transition: all 0.3s; font-size: 0.95rem; font-weight: 500;
}
.premium-input:focus {
  outline: none; border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* ========================================= */
/* SHINE EFFECT (CARDS)                      */
/* ========================================= */
.project-card, .feature-card, .timeline-card {
  position: relative; overflow: hidden; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 30px 60px rgba(0,0,0,0.12); }
.feature-card:hover, .timeline-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: #3b82f6; }

.project-card::after, .feature-card::after, .timeline-card::after {
  content: ''; position: absolute; top: 0; left: -200%; width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg); transition: all 0.8s ease; z-index: 10; pointer-events: none;
}
.project-card:hover::after, .feature-card:hover::after, .timeline-card:hover::after { left: 200%; transition: all 0.8s ease-in-out; }

.image-zoom { transition: transform 0.8s ease; }
.project-card:hover .image-zoom { transform: scale(1.08); }

/* ========================================= */
/* ADVANCED CALCULATOR (SLIDERS & CHART)     */
/* ========================================= */
.custom-slider {
  -webkit-appearance: none; width: 100%; height: 6px; background: #e5e7eb; border-radius: 5px; outline: none; margin-top: 15px;
}
.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #111827; cursor: pointer; border: 4px solid #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.custom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

.donut-chart {
  width: 220px; height: 220px; border-radius: 50%;
  background: conic-gradient(#111827 0% 70%, #d1d5db 70% 100%);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: background 0.5s ease;
}
.donut-chart::before {
  content: ''; width: 175px; height: 175px; background: #ffffff; border-radius: 50%; position: absolute;
}

/* ========================================= */
/* SCROLLING TICKER                          */
/* ========================================= */
.ticker-wrap { width: 100%; overflow: hidden; background-color: #111827; padding: 12px 0; color: white; border-bottom: 1px solid #374151;}
.ticker { display: inline-block; white-space: nowrap; animation: ticker 30s linear infinite; font-weight: 600; font-size: 0.9rem; letter-spacing: 1px;}
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }

/* Mobile Menu Active */
.mobile-menu-active { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }
/* ========================================= */
/* MOBILE RESPONSIVE NAVBAR FIX              */
/* ========================================= */
@media (max-width: 768px) {
  /* Phone par floating navbar ka shape aur size fix */
  .nav-floating {
    width: calc(100% - 24px) !important; 
    margin-top: 12px !important;
    padding: 12px 20px !important;
    border-radius: 20px !important; /* Phone ke liye thoda kam round rakha hai */
  }

  /* Logo text ko phone par properly fit karna */
  #navbar h1 {
    font-size: 1.3rem !important;
  }
  
  #navbar img {
    width: 35px !important;
    height: 35px !important;
  }

  /* Mobile hamburger menu button fix */
  #mobileMenuBtn {
    width: 38px !important;
    height: 38px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb;
  }

  /* Full screen menu open hone par links overlap na karein */
  #mobileMenu {
    padding-top: 90px !important; 
    justify-content: flex-start !important;
  }
  
  .mobile-link {
    font-size: 2.2rem !important;
    margin-bottom: 0.5rem;
  }
}