/* ==========================================================================
   ITJUG INFOSYS PVT. LTD. - Official Static Website Stylesheet
   Motto: IT SOFTWARE AND HARDWARE SOLUTIONS
   Slogan: "we deliver better.."
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  --primary: #EA580C;
  --primary-dark: #B91C1C;
  --primary-light: #EAB308;
  --gold: #D97706;
  --navy-dark: #450A0A;
  --navy-card: #2A0808;
  --slate-900: #1C0A0A;
  --slate-800: #2D1212;
  --slate-700: #3D1E1E;
  --slate-600: #523030;
  --slate-500: #6B4646;
  --slate-400: #996B6B;
  --slate-200: #F3E8E8;
  --slate-100: #FDF4F4;
  --slate-50: #FFFDF9;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: #334155;
  background-color: #FFFDF9;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--navy-dark);
}
::-webkit-scrollbar-thumb {
  background: #78350F;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Brand Text Gradient (Deep Red -> Orange -> Gold -> Yellow) */
.brand-gradient-text {
  background: linear-gradient(135deg, #DC2626 0%, #EA580C 35%, #D97706 70%, #EAB308 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Matching Brand Gradient Backgrounds */
.brand-hero-gradient {
  background: radial-gradient(circle at 80% 20%, rgba(234, 88, 12, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 20% 80%, rgba(234, 179, 8, 0.18) 0%, transparent 40%),
              linear-gradient(180deg, #FFFFFF 0%, #FFFBEB 50%, #FEF3C7 100%);
}

.brand-dark-gradient {
  background: linear-gradient(135deg, #450A0A 0%, #7F1D1D 40%, #C2410C 75%, #D97706 100%);
}

.brand-bar-gradient {
  background: linear-gradient(90deg, #450A0A 0%, #7F1D1D 40%, #C2410C 70%, #B45309 100%);
}

.brand-section-light {
  background: linear-gradient(180deg, #FEF3C7 0%, #FFFBEB 40%, #FFFFFF 100%);
}

.brand-section-soft {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 50%, #FFEDD5 100%);
}

.brand-card-gradient {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFFBEB 100%);
}

.brand-btn-gradient {
  background: linear-gradient(135deg, #B91C1C 0%, #EA580C 45%, #D97706 80%, #CA8A04 100%);
  transition: all 0.3s ease;
}

.brand-btn-gradient:hover {
  background: linear-gradient(135deg, #991B1B 0%, #C2410C 45%, #B45309 80%, #A16207 100%);
  box-shadow: 0 10px 20px -5px rgba(234, 88, 12, 0.4);
}

/* Pulse Glow Animation */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 4s ease-in-out infinite;
}

/* Custom Modal Animations */
.modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.active .modal-content {
  transform: scale(1) translateY(0);
}

/* Mobile Nav Drawer */
.mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-drawer.open {
  transform: translateX(0);
}

/* Card Hover Elevation */
.card-hover-effect {
  transition: all 0.3s ease;
}

.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(234, 88, 12, 0.2);
}

/* Active Nav Indicator */
.nav-link.active {
  color: var(--primary);
  font-weight: 700;
}

/* Mobile Nav Drawer Active Link */
.drawer-link.active {
  background-color: rgba(234, 88, 12, 0.25);
  border-color: rgba(250, 204, 21, 0.5);
  color: #FACC15;
}

/* Hide Scrollbar for Horizontal Touch Swiping */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Modal Responsive Mobile Scroll */
.modal-content {
  max-height: 88vh;
  overflow-y: auto;
}

/* Prevent iOS Safari Auto-Zoom on Form Field Focus */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   DARK MODE STYLES (Completely Discards White/Light Backgrounds)
   ========================================================================== */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark,
html.dark body {
  color-scheme: dark;
  background-color: #0b101d !important;
  color: #f8fafc !important;
}

/* Header & Sticky Nav in Dark Mode */
html.dark header {
  background-color: rgba(11, 16, 29, 0.95) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Section Gradients in Dark Mode */
html.dark .brand-hero-gradient {
  background: radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.15) 0%, transparent 55%),
              radial-gradient(circle at 20% 80%, rgba(185, 28, 28, 0.18) 0%, transparent 55%),
              linear-gradient(180deg, #0b101d 0%, #111827 50%, #0b101d 100%) !important;
}

html.dark .brand-section-light,
html.dark .brand-section-soft,
html.dark section#technologies,
html.dark section#services,
html.dark section#about,
html.dark section#portfolio,
html.dark section#contact {
  background: linear-gradient(180deg, #0f172a 0%, #151d30 50%, #0f172a 100%) !important;
}

html.dark .brand-card-gradient {
  background: linear-gradient(145deg, #182238 0%, #111827 100%) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

/* Discard ALL White and Light Background Classes */
html.dark .bg-white,
html.dark [class*="bg-white"],
html.dark [class*="bg-[#FFFDF9]"],
html.dark [class*="bg-[#fff]"] {
  background-color: #151d30 !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .bg-slate-50,
html.dark [class*="bg-slate-50"] {
  background-color: #1a233a !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-slate-100,
html.dark [class*="bg-slate-100"] {
  background-color: #222d48 !important;
  color: #f1f5f9 !important;
}

html.dark .bg-slate-200,
html.dark [class*="bg-slate-200"] {
  background-color: #2d3a5e !important;
  color: #f1f5f9 !important;
}

html.dark .bg-amber-50,
html.dark [class*="bg-amber-50"] {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fde047 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .bg-amber-100,
html.dark [class*="bg-amber-100"] {
  background-color: rgba(245, 158, 11, 0.22) !important;
  color: #fde047 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

html.dark .bg-emerald-50,
html.dark [class*="bg-emerald-50"],
html.dark .bg-emerald-100,
html.dark [class*="bg-emerald-100"] {
  background-color: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

html.dark .bg-rose-50,
html.dark [class*="bg-rose-50"],
html.dark .bg-rose-100,
html.dark [class*="bg-rose-100"] {
  background-color: rgba(244, 63, 94, 0.18) !important;
  color: #fda4af !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}

/* Hover State Backgrounds in Dark Mode */
html.dark [class*="hover:bg-amber-50"]:hover,
html.dark [class*="hover:bg-amber-100"]:hover,
html.dark [class*="hover:bg-slate-100"]:hover,
html.dark [class*="hover:bg-slate-200"]:hover,
html.dark [class*="hover:bg-white"]:hover {
  background-color: #263352 !important;
}

/* Modals & Dialogs in Dark Mode */
html.dark .modal-content {
  background-color: #151d30 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #f8fafc !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

html.dark .modal-backdrop {
  background-color: rgba(3, 7, 18, 0.82) !important;
}

/* Form Inputs, Selects & Textareas in Dark Mode */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1a233a !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #f59e0b !important;
  background-color: #1e293b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

/* Filter Tab Buttons in Dark Mode */
html.dark .tech-filter-btn:not(.bg-\[\#EA580C\]):not(.bg-amber-600),
html.dark .portfolio-filter-btn:not(.bg-\[\#EA580C\]):not(.bg-amber-600) {
  background-color: #1d273e !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Typography Overrides in Dark Mode */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 {
  color: #f8fafc !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700 {
  color: #fde047 !important;
}

html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700 {
  color: #6ee7b7 !important;
}

html.dark .text-rose-900,
html.dark .text-rose-800,
html.dark .text-rose-700,
html.dark .text-rose-600 {
  color: #fca5a5 !important;
}

/* Navigation Links in Dark Mode */
html.dark .nav-link {
  color: #cbd5e1;
}

html.dark .nav-link:hover {
  color: #facc15;
}

html.dark .nav-link.active {
  color: #fb923c;
  font-weight: 800;
}

/* Footer in Dark Mode */
html.dark footer {
  background-color: #070a12 !important;
  border-top-color: rgba(245, 158, 11, 0.25) !important;
}

/* Code Blocks in Dark Mode */
html.dark code {
  background-color: #0f172a !important;
  color: #fde047 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}