@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@300;400;500;700&display=swap");

/* Custom Neon Colors */
.text-shock-green {
  color: #00ff41;
}
.text-neon-green {
  color: #39ff14;
}
.border-neon {
  border-color: #39ff14;
}
.bg-custom-black {
  background-color: #000000;
}

/* Neon Text Shadow/Glow */
.text-shadow-neon-green {
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.6),
    0 0 20px rgba(57, 255, 20, 0.4);
}
.glow-box {
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}
.hover\:glow-text-intense:hover {
  text-shadow: 0 0 20px #39ff14, 0 0 30px #39ff14, 0 0 40px #39ff14;
}

.glow-text {
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.75), 0 0 32px rgba(57, 255, 20, 0.55), 0 0 42px rgba(57, 255, 20, 0.4);
}

.btn-neon {
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.5), 0 0 24px rgba(57, 255, 20, 0.35);
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.55);
  filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.55));
}
.btn-neon:hover,
.btn-neon:focus {
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.7), 0 0 36px rgba(57, 255, 20, 0.55);
  text-shadow: 0 0 14px rgba(57, 255, 20, 0.75);
}
.btn-neon:active {
  box-shadow: 0 0 22px rgba(57, 255, 20, 0.85), 0 0 44px rgba(57, 255, 20, 0.65);
  transform: scale(0.98);
}

body {
font-size: 1.1rem;
background-color: #000000; /* Fallback black color */

/* This creates two background layers:
  1. A transparent black overlay (at 85% opacity)
  2. New brick image
*/
background-image: 
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.888)),
url("/photos/Brick-background2.jpeg"); /* <-- IMPORTANT: Update this path for! */

background-size: cover; /* Scales the image to fill the screen */
background-position: center center; /* Centers the image */
background-attachment: fixed; /* Keeps the cool "parallax" effect */
}

:root {
  --neon-green: #39ff14;
  --shock-green: #00ff41;
  --neon-glow: rgba(57, 255, 20, 0.5);
  --map-bg: #050505;
}

body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background: radial-gradient(600px 300px at 15% 25%, rgba(57,255,20,0.16), transparent 60%),
              radial-gradient(450px 240px at 80% 75%, rgba(57,255,20,0.12), transparent 60%);
  mix-blend-mode: screen;
}
body::after {
  background: radial-gradient(500px 260px at 60% 35%, rgba(57,255,20,0.10), transparent 60%);
  mix-blend-mode: screen;
}

html {
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 24px
  ),
  repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 24px
  );
}

h1 {
  font-size: 3.5rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.5rem;
}
p {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.7rem;
  }
  h4 {
    font-size: 1.3rem;
  }
  p {
    font-size: 1.1rem;
  }
}

/* Universal Styling */
*,
*:before,
*:after {
  box-sizing: border-box;
}
img,
video,
iframe,
svg,
canvas,
button,
input,
select,
textarea,
.nav-link,
.mobile-nav-link,
.rounded-lg,
.rounded-xl {
  border-radius: 8px; /* Consistent rounded corners */
}
html {
  scroll-behavior: smooth;
} /* Smooth scroll behavior */

/* Active nav link styling */
.nav-link.active,
.mobile-nav-link.active {
  color: #00ff41;
  font-weight: 700;
}
.nav-link.active span:first-child,
.mobile-nav-link.active span:first-child {
  text-shadow: 0 0 15px #39ff14, 0 0 25px #39ff14, 0 0 35px #39ff14;
}
/* Hover state for "Why Choose Us" cards */
.feature-card {
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.feature-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px rgba(57, 255, 20, 0.4);
  border-color: #39ff14;
}

/* Modal Styling */
#productModal {
  transition: opacity 0.3s ease-in-out;
}
.lightbox-trigger {
  cursor: pointer;
}
.defer-render {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 800px;
}
#productModal #productModalContent.modal-compact #modalTitle { font-size: 2.25rem !important; }
#productModal #productModalContent.modal-compact #modalDescription { font-size: 1rem !important; }
#productModal #productModalContent.modal-compact #modalDetails h4 { font-size: 1.25rem !important; }
#productModal #productModalContent.modal-compact #modalSpecs { font-size: 0.95rem !important; }
#productModal #productModalContent.modal-compact #modalImage { max-height: 35svh !important; }
#productModal #productModalContent.modal-compact-2 #modalTitle { font-size: 2rem !important; }
#productModal #productModalContent.modal-compact-2 #modalDescription { font-size: 0.95rem !important; }
#productModal #productModalContent.modal-compact-2 #modalDetails h4 { font-size: 1.15rem !important; }
#productModal #productModalContent.modal-compact-2 #modalSpecs { font-size: 0.9rem !important; }
#productModal #productModalContent.modal-compact-2 #modalImage { max-height: 30svh !important; }
#productModal #productModalContent.image-compact #modalImage { max-height: 35svh !important; }
#productModal #productModalContent.image-compact-2 #modalImage { max-height: 30svh !important; }
/* Contrast improvements */
.text-gray-300 { color: #e6e6e6 !important; }
.text-gray-400 { color: #d9d9d9 !important; }
.text-gray-500 { color: #cfcfcf !important; }
p, li { text-shadow: 0 0 6px rgba(0,0,0,0.35); }
.section-subtitle {
  color: #eaeaea;
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  line-height: 1.7;
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(57, 255, 20, 0.15);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

#map-container { position: relative; box-shadow: 0 0 30px rgba(57, 255, 20, 0.15); border-radius: 8px; border: 2px solid #ffffff; }
#map { width: 100%; height: 500px; background: #1a1a1a; }
.leaflet-container { width: 100%; height: 100%; }
@media (max-width: 640px) {
  #map { height: 60vh; }
}
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.02); color: var(--neon-green); border: 2px solid rgba(57,255,20,0.35); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; opacity: 0.08; z-index: 50; box-shadow: 0 0 8px rgba(57,255,20,0.25); }
.slider-arrow:hover { opacity: 0.25; }
.reviews-arrow-left { left: 0.5rem; }
.reviews-arrow-right { right: 0.5rem; }
.projects-arrow-left { left: 0.5rem; }
.projects-arrow-right { right: 0.5rem; }
@media (min-width: 1024px) {
  .slider-arrow { background: rgba(57,255,20,0.08); border-color: var(--neon-green); color: var(--neon-green); opacity: 0.9; }
  .slider-arrow:hover { opacity: 1; }
  .reviews-arrow-left { left: -4rem; }
  .reviews-arrow-right { right: -4rem; }
  .projects-arrow-left { left: -4rem; }
  .projects-arrow-right { right: -4rem; }
}
.map-overlay {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(57,255,20,0.25);
  color: #eaeaea;
  padding: 10px 12px;
  border-radius: 10px;
  pointer-events: none;
}
.leaflet-popup-content-wrapper {
  background: rgba(10,10,10,0.95);
  color: #fff;
  border: 1px solid var(--neon-green);
  border-radius: 0;
  box-shadow: 0 0 18px rgba(57,255,20,0.35);
}
.leaflet-popup-tip { background: var(--neon-green); }
.leaflet-container a.leaflet-popup-close-button { color: #666; }

a, button, .nav-link, .mobile-nav-link, .product-slide, .product-dot, .project-dot,
#prevBtn, #nextBtn, #productPrevBtn, #productNextBtn, #projectPrevBtn, #projectNextBtn,
.lightbox-trigger, #closeLightboxBtn, #backToTopBtn {
  cursor: pointer !important;
}