/* ==========================================================================
   SafeVision Surveillance - Independence Day Theme (Vibrant & Soft)
   ========================================================================== */

/* 1. Global Light Theme Variables & Soft Background */
:root, body, body[data-theme="light"] {
  --bg-main: #fffaf5 !important; /* Very soft warm tint */
  --bg-alt: #ffffff !important;
  
  --text-main: #b34700 !important;     /* Deep Saffron instead of dark grey/black */
  --text-muted: #024a26 !important;    /* Deep Green instead of muted grey */
  --text-light: #FF671F !important;
  
  --primary-color: #FF671F !important;   
  --secondary-color: #046A38 !important;
  --accent-color: #FF671F !important;    /* India Saffron */
  --success-color: #046A38 !important;   /* India Green */
  
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* 2. Soft Tiranga Wavy Background Overlay (Garlands style) */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Soft tricolor radial/linear blend */
  background: 
    radial-gradient(ellipse at top left, rgba(255, 103, 31, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(4, 106, 56, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 103, 31, 0.03) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(4, 106, 56, 0.03) 100%) !important;
  z-index: -3;
  pointer-events: none;
}

/* Top Decorative Garland (Wave SVG) */
body::after {
  content: '';
  position: absolute;
  top: 80px; /* Push below the navbar */
  left: 0; width: 100%; height: 150px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23FF671F" fill-opacity="0.15" d="M0,64L48,80C96,96,192,128,288,122.7C384,117,480,75,576,85.3C672,96,768,160,864,176C960,192,1056,160,1152,138.7C1248,117,1344,107,1392,101.3L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path><path fill="%23046A38" fill-opacity="0.1" d="M0,256L48,229.3C96,203,192,149,288,154.7C384,160,480,224,576,218.7C672,213,768,139,864,128C960,117,1056,171,1152,197.3C1248,224,1344,224,1392,224L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -2;
  pointer-events: none;
}

/* 3. Tiranga Heading Texts (No Black/Dark) */
h1, h2, h3, h4, h5, h6 {
  background: linear-gradient(90deg, #FF671F 0%, #d35400 30%, #026b38 70%, #046A38 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block;
  font-weight: 700 !important;
}

/* Hero specific span colors */
.hero-content h1 span {
  background: none !important;
  -webkit-text-fill-color: var(--accent-color) !important;
}

/* 4. Fix Cards and Apply Tiranga Dual-Tone Shadows */
.card, .glass-card-dark, .product-card, .service-card, .showcase-card, .products-sidebar {
  background: rgba(255, 255, 255, 0.9) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 103, 31, 0.2) !important;
  /* Dual tone shadow: Saffron top-left, Green bottom-right */
  box-shadow: -8px -8px 20px rgba(255, 103, 31, 0.15), 8px 8px 20px rgba(4, 106, 56, 0.15) !important;
  color: var(--text-main) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.card:hover, .product-card:hover, .service-card:hover, .showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: -12px -12px 25px rgba(255, 103, 31, 0.25), 12px 12px 25px rgba(4, 106, 56, 0.25) !important;
  border-color: rgba(4, 106, 56, 0.3) !important;
}
.card::after, .glass-card-dark::after, .product-card::after {
  display: none !important;
}
/* Replace dark overlays on projects with Tiranga overlay */
.marquee-item .overlay-card::after,
.marquee-item-lg .overlay-card::after,
.marquee-item-sm .overlay-card::after,
.overlay-card::after,
.showcase-card::after,
.gallery-item::after {
  background: linear-gradient(to top, rgba(4, 106, 56, 0.8) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 103, 31, 0.8) 100%) !important;
}
.card p, .product-card p, .showcase-desc, .product-price {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* 5. Tiranga Logo Redesign using CSS Masks */
.brand-logo {
  position: relative;
  display: inline-block;
}
.brand-logo img {
  opacity: 0 !important; /* Hide original */
}
.brand-logo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Tiranga Gradient for the logo */
  background: linear-gradient(90deg, #FF671F 0%, #b34700 40%, #024a26 60%, #046A38 100%) !important;
  -webkit-mask-image: url('../assets/logo.png');
  mask-image: url('../assets/logo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}
/* Apply same mask technique to footer logo */
.footer-title:has(img) {
  position: relative;
  display: inline-block;
  min-height: 80px; /* match image height */
  min-width: 250px;
}
.footer-title:has(img) img {
  opacity: 0 !important;
}
.footer-title:has(img)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, #FF671F 0%, #b34700 40%, #024a26 60%, #046A38 100%) !important;
  -webkit-mask-image: url('../assets/logo.png');
  mask-image: url('../assets/logo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

/* 6. Tiranga Footer Theming (Bright & Colorful, NO DARK COLORS) */
.main-footer, footer {
  background: linear-gradient(135deg, rgba(255, 103, 31, 0.05), rgba(255, 255, 255, 1), rgba(4, 106, 56, 0.05)) !important;
  color: var(--text-muted) !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #FF671F, #FFFFFF, #046A38) 1 !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.05) !important;
  position: relative;
}
.main-footer *, footer * {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}
.main-footer h3, footer h3 {
  background: linear-gradient(90deg, #FF671F, #046A38) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.main-footer .footer-links a:hover {
  color: var(--accent-color) !important;
  -webkit-text-fill-color: var(--accent-color) !important;
}

/* 7. Navbar Fixes (Remove dark colors, make solid to hide background) */
.main-navbar, .navbar {
  background: #ffffff !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #FF671F, #FFFFFF, #046A38) 1 !important;
  box-shadow: 0 4px 20px rgba(255, 103, 31, 0.1) !important;
  z-index: 1000 !important;
}
.nav-link {
  color: var(--text-main) !important;
  font-weight: 600;
}
.nav-link:hover {
  color: #FF671F !important;
}
/* Ensure mobile menu button is visible on white background */
.nav-toggle {
  color: #046A38 !important; 
}
.nav-link.active {
  color: var(--accent-color) !important;
}

/* Buttons */
.btn-primary, .btn-saffron {
  background: linear-gradient(90deg, #FF671F, #e65c00) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255, 103, 31, 0.4) !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-saffron:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 103, 31, 0.6) !important;
}
.btn-outline, .btn-green-outline {
  background: #ffffff !important;
  color: var(--success-color) !important;
  -webkit-text-fill-color: var(--success-color) !important;
  border: 2px solid var(--success-color) !important;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(4, 106, 56, 0.1) !important;
}
.btn-outline:hover, .btn-green-outline:hover {
  background: rgba(4, 106, 56, 0.05) !important;
}

/* 8. 3D Decorative Assets Styling */
.deco-3d {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply; /* Works perfectly with solid white background */
}
.deco-balloons {
  width: 300px;
  animation: floatBalloons 6s ease-in-out infinite alternate;
}
.deco-butterfly {
  width: 120px;
  animation: flutterButterfly 8s ease-in-out infinite;
}

@keyframes floatBalloons {
  0% { transform: translateY(0px) rotate(-3deg); }
  100% { transform: translateY(-20px) rotate(3deg); }
}

@keyframes flutterButterfly {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  33% { transform: translate(15px, -15px) rotate(10deg) scale(1.05); }
  66% { transform: translate(-10px, -25px) rotate(-5deg) scale(0.95); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

/* Remove inverted text effect on marquee items in light theme */
.marquee-item {
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
}

/* Fix Hero Text elements specifically */
.trust-indicators {
  color: var(--text-muted) !important;
}
.trust-indicators span {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* Clean up hero section container */
.hero-section {
  background: transparent !important;
  box-shadow: none !important;
}