/* ============================================================
   OFFTHEBOAT IT — style.css
   Dark Theme (default) + Light Theme toggle support
   সব animation / effect অপরিবর্তিত আছে
   ============================================================ */

   html {
    scroll-behavior: smooth;
  }
  
  /* ========== THEME CSS VARIABLES ========== */
  :root {
    /* --- Dark Theme (default) --- */
    --bg-body:        #000000;
    --bg-section:     #000000;
    --bg-card:        #111111;
    --bg-input:       #1a1a1a;
    --bg-input-focus: #1a1a1a;
    --bg-nav:         rgba(0, 0, 0, 0.60);
    --bg-mobile-menu: #0a0a0a;
    --bg-dropdown:    #0a0a0b;
    --bg-slider:      #000000;
  
    --text-primary:   #ffffff;
    --text-muted:     #9ca3af;
    --text-subtle:    #6b7280;
    --text-nav:       #9ca3af;
  
    --border-color:   rgba(255, 255, 255, 0.10);
    --border-section: rgba(255, 255, 255, 0.05);
  
    --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.40);
    --stroke-glow-color: rgba(255, 255, 255, 0.55);
    --stroke-shadow:  rgba(255, 255, 255, 0.10);
  
    --hero-glow-1:    rgba(59, 130, 246, 0.10);
    --hero-glow-2:    rgba(37, 99, 235, 0.05);
    --hero-border:    rgba(255, 255, 255, 0.10);
    --hero-overlay:   rgba(0, 0, 0, 0.40);
  
    --slider-fade:    rgba(0, 0, 0, 0.90);
  
    --filter-btn-bg:      #1a1a1a;
    --filter-btn-text:    #d1d5db;
    --filter-btn-hover:   #282828;
  
    --toggle-border:  rgba(255, 255, 255, 0.15);
    --toggle-hover:   rgba(37, 99, 235, 0.15);
  }
  
  /* ========== LIGHT THEME VARIABLES ========== */
  [data-theme="light"] {
    --bg-body:        #f1f5f9;
    --bg-section:     #f1f5f9;
    --bg-card:        #ffffff;
    --bg-input:       #f8fafc;
    --bg-input-focus: #f1f5f9;
    --bg-nav:         rgba(255, 255, 255, 0.85);
    --bg-mobile-menu: #ffffff;
    --bg-dropdown:    #ffffff;
    --bg-slider:      #e2e8f0;
  
    --text-primary:   #0f172a;
    --text-muted:     #475569;
    --text-subtle:    #64748b;
    --text-nav:       #334155;
  
    --border-color:   rgba(0, 0, 0, 0.09);
    --border-section: rgba(0, 0, 0, 0.05);
  
    --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.08);
    --stroke-glow-color: rgba(15, 23, 42, 0.40);
    --stroke-shadow:  rgba(0, 0, 0, 0.06);
  
    --hero-glow-1:    rgba(59, 130, 246, 0.08);
    --hero-glow-2:    rgba(37, 99, 235, 0.04);
    --hero-border:    rgba(0, 0, 0, 0.08);
    --hero-overlay:   rgba(255, 255, 255, 0.50);
  
    --slider-fade:    rgba(241, 245, 249, 0.95);
  
    --filter-btn-bg:      #e2e8f0;
    --filter-btn-text:    #334155;
    --filter-btn-hover:   #cbd5e1;
  
    --toggle-border:  rgba(0, 0, 0, 0.12);
    --toggle-hover:   rgba(37, 99, 235, 0.10);
  }
  
  /* ========== BASE ========== */
  body {
    font-family: "DM Sans", system-ui, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    transition: background 0.4s ease, color 0.4s ease;
  }
  
  /* ========== GRADIENTS (অপরিবর্তিত) ========== */
  .gradient-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
  }
  .gradient-cta {
    background: linear-gradient(135deg, #2563eb, #6d28d9);
  }
  .shadow-glow {
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.3);
  }
  .shadow-card {
    box-shadow: var(--shadow-card);
  }
  .text-gradient {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* ========== SCROLL ANIMATIONS (অপরিবর্তিত) ========== */
  .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ========== CARD HOVER (অপরিবর্তিত) ========== */
  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-8px);
  }
  .img-zoom img {
    transition: transform 0.5s ease;
  }
  .img-zoom:hover img {
    transform: scale(1.05);
  }
  .project-zoom img {
    transition: transform 0.5s ease;
  }
  .project-zoom:hover img {
    transform: scale(1.1);
  }
  
  /* ========== HERO SLIDE IN ANIMATION (অপরিবর্তিত) ========== */
  @keyframes slideIn {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  
  /* ========== MARQUEE SLIDER (অপরিবর্তিত) ========== */
  .stroke-glow {
    -webkit-text-stroke: 1.5px var(--stroke-glow-color);
    filter: drop-shadow(0 0 10px var(--stroke-shadow));
    transition: -webkit-text-stroke 0.4s ease, filter 0.4s ease;
  }
  
  @keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  
  .animate-marquee {
    animation: marquee 20s linear infinite !important;
    mask-image: linear-gradient(to right,
      rgba(0,0,0,0.1) 0%, white 30%, white 70%, rgba(0,0,0,0.1) 100%);
    -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,0.1) 0%, white 30%, white 70%, rgba(0,0,0,0.1) 100%);
  }
  
  /* ========== THEME-AWARE UTILITY OVERRIDES ========== */
  
  /* Body background */
  body,
  section,
  .bg-black,
  #home {
    background-color: var(--bg-body);
  }
  
  /* ★ Light theme: সব dark card background সাদা করো ★ */
  [data-theme="light"] .bg-\[#111\],
  [data-theme="light"] [class*="bg-[#111]"],
  [data-theme="light"] .card-hover,
  [data-theme="light"] #services .rounded-2xl,
  [data-theme="light"] #projects .rounded-2xl,
  [data-theme="light"] #contact .rounded-2xl {
    background-color: #ffffff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
  }
  
  /* Card এর ভেতরের text content area (p tag) */
  [data-theme="light"] .card-hover h3,
  [data-theme="light"] #services h3,
  [data-theme="light"] #projects h3 {
    color: #0f172a !important;
  }
  
  [data-theme="light"] .card-hover p,
  [data-theme="light"] #services p,
  [data-theme="light"] #projects p {
    color: #475569 !important;
  }
  
  /* Hero section */
  #home {
    background: var(--bg-body) !important;
    transition: background 0.4s ease;
  }
  
  [data-theme="light"] #home {
    background: linear-gradient(160deg, #eef2ff 0%, #f1f5f9 60%, #e0e7ff 100%) !important;
  }
  
  /* Hero glow blobs — color unchanged, just opacity tweak for light */
  [data-theme="light"] #home .bg-blue-500\/10 {
    opacity: 0.5;
  }
  [data-theme="light"] #home .bg-blue-600\/5 {
    opacity: 0.4;
  }
  
  /* Hero card border + overlay */
  [data-theme="light"] #home .rounded-lg.border {
    border-color: var(--hero-border);
  }
  [data-theme="light"] #home .bg-black\/40 {
    background: rgba(255,255,255,0.50) !important;
  }
  
  /* Slider section */
  [data-theme="light"] section.py-12.bg-black {
    background: var(--bg-slider) !important;
  }
  [data-theme="light"] section.py-12.bg-black .absolute {
    background: linear-gradient(to right,
      var(--slider-fade) 0%, transparent 30%,
      transparent 70%, var(--slider-fade) 100%) !important;
  }
  
  /* Cards — dark mode default */
  .bg-\[#111\] {
    background-color: var(--bg-card);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
  }
  
  /* Inputs */
  .bg-\[#1a1a1a\] {
    background-color: var(--bg-input);
    transition: background-color 0.4s ease;
  }
  
  /* Section backgrounds */
  section {
    background-color: var(--bg-section);
    transition: background-color 0.4s ease;
  }
  
  /* Text colors */
  .text-white {
    color: var(--text-primary) !important;
    transition: color 0.4s ease;
  }
  .text-gray-400 {
    color: var(--text-muted) !important;
    transition: color 0.4s ease;
  }
  .text-gray-300 {
    color: var(--text-muted) !important;
    transition: color 0.4s ease;
  }
  .text-gray-500 {
    color: var(--text-subtle) !important;
    transition: color 0.4s ease;
  }
  
  /* Borders */
  .border-white\/10 {
    border-color: var(--border-color) !important;
    transition: border-color 0.4s ease;
  }
  .border-white\/5 {
    border-color: var(--border-section) !important;
  }
  
  /* ========== NAV ========== */
  #header .bg-black\/60 {
    background-color: var(--bg-nav) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.4s ease, border-color 0.4s ease;
  }
  
  /* Nav links */
  #header .text-gray-400 {
    color: var(--text-nav) !important;
  }
  [data-theme="light"] #header .text-gray-400:hover {
    color: #2563eb !important;
  }
  
  /* Dropdown */
  #header .bg-\[#0a0a0b\] {
    background-color: var(--bg-dropdown) !important;
    border-color: var(--border-color) !important;
  }
  
  /* Mobile menu */
  #mobileMenu {
    background-color: var(--bg-mobile-menu) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.4s ease;
  }
  
  /* CTA section */
  [data-theme="light"] .gradient-cta {
    background: linear-gradient(135deg, #2563eb, #6d28d9);
  }
  
  /* Contact form card */
  [data-theme="light"] #contactForm {
    background-color: var(--bg-card) !important;
    box-shadow: 0 4px 40px rgba(37, 99, 235, 0.08);
  }
  
  /* Input fields in form */
  [data-theme="light"] #contactForm input,
  [data-theme="light"] #contactForm textarea {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
  }
  [data-theme="light"] #contactForm input::placeholder,
  [data-theme="light"] #contactForm textarea::placeholder {
    color: var(--text-subtle) !important;
  }
  
  /* Filter buttons in projects */
  .filter-btn {
    transition: all 0.3s ease;
  }
  [data-theme="light"] .filter-btn:not(.active) {
    background-color: var(--filter-btn-bg) !important;
    color: var(--filter-btn-text) !important;
  }
  [data-theme="light"] .filter-btn:not(.active):hover {
    background-color: var(--filter-btn-hover) !important;
  }
  
  /* Active filter button — gradient stays the same */
  .filter-btn.active {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
  }
  
  /* Hover item in dropdown nav */
  [data-theme="light"] #header .hover\:bg-white\/\[0\.03\]:hover {
    background-color: rgba(37, 99, 235, 0.04) !important;
  }
  
  /* ========== THEME TOGGLE BUTTON ========== */
  .theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--toggle-border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .theme-toggle:hover {
    background: var(--toggle-hover);
    border-color: #2563eb;
    transform: scale(1.1) rotate(15deg);
  }
  .theme-toggle svg {
    transition: opacity 0.3s ease;
  }