/* Global Design Tokens and Custom Styles */
:root {
  /* Colors */
  --color-primary: #e60000;
  --color-primary-hover: #cc0000;
  --color-text: #374151; /* gray-700 */
  --color-muted: #6b7280; /* gray-500 */
  --color-bg: #ffffff;

  /* Brand Gradients (used across sections) */
  --gradient-hero: linear-gradient(135deg, #0c4a6e, #4c1d95, #1e40af);
  --gradient-cta: linear-gradient(90deg, #f97316, #ef4444);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-md: 0 10px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.12);
}

/* Typography */
body { font-family: 'Inter', sans-serif; background: var(--color-bg); color: #111827; }

/* Navbar */
.navbar { transition: all 0.3s ease; }
.navbar.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-sm); }
.navbar a:hover { color: var(--color-primary) !important; }
/* Ensure header element gets scrolled styles since JS toggles 'scrolled' on <header> */
header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-sm); }
header a:hover { color: var(--color-primary) !important; }

/* Buttons and Helpers */
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }

/* Mobile Menu Overlay */
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

/* Mobile Menu */
.mobile-menu { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background-color: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); padding: 2rem 1.5rem; z-index: 1000; transition: right 0.3s ease; overflow-y: auto; }
.mobile-menu.active { right: 0; }
.mobile-menu-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; color: #374151; background: none; border: none; border-radius: 50%; transition: all 0.3s ease; }
.mobile-menu-close:hover { color: var(--color-primary); background-color: #f3f4f6; }
.mobile-menu ul { list-style: none; padding: 0; margin: 3rem 0 0 0; }
.mobile-menu ul li { border-bottom: 1px solid #e5e7eb; margin-bottom: 0; }
.mobile-menu ul li:last-child { border-bottom: none; }
.mobile-menu ul li > a { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; color: #374151; text-decoration: none; font-weight: 500; font-size: 1rem; transition: color 0.3s ease; }
.mobile-menu ul li > a:hover { color: var(--color-primary); }

/* Mobile Dropdown Styles */
.mobile-menu .mobile-dropdown { position: relative; }
.mobile-menu .mobile-dropdown > a { cursor: pointer; }
.mobile-menu .mobile-dropdown .dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: #f9fafb; margin: 0 -1rem; padding: 0 1rem; }
/* Allow long lists to scroll inside mobile dropdown */
.mobile-menu .mobile-dropdown.active .dropdown-content { max-height: 70vh; overflow-y: auto; padding: 0.5rem 1rem; }
.mobile-menu .mobile-dropdown .dropdown-content a { display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; font-size: 0.875rem; border-bottom: none; transition: color 0.3s ease; }
.mobile-menu .mobile-dropdown .dropdown-content a:hover { color: var(--color-primary); }
.mobile-menu .mobile-dropdown i { transition: transform 0.3s ease; }
.mobile-menu .mobile-dropdown.active i { transform: rotate(180deg); }

/* CTA Button in Mobile Menu */
.mobile-menu .mobile-cta { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; }

/* Responsive Styles */
.desktop-menu { display: flex; }
.mobile-menu-button { display: none; }
@media (max-width: 768px) {
  .desktop-menu { display: none !important; }
  .mobile-menu-button { display: block !important; }
  #desktopMenu { display: none !important; }
  nav .container > div { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
  .navbar-brand { flex: 1; }
}

/* Desktop dropdown panel scrolling for long region lists */
.desktop-menu li.relative ul {
  max-height: 70vh;
  overflow-y: auto;
}

/* Fixed Bottom Menu and WhatsApp Button */
.fixed-bottom-menu { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 1rem; z-index: 1000; display: none; }
.whatsapp-button { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 1001; transition: all 0.3s ease; }
.whatsapp-button:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
@media (max-width: 768px) { .fixed-bottom-menu { display: flex; justify-content: space-around; } }

/* Floating Call Button (above WhatsApp) */
.call-button { position: fixed; bottom: 90px; right: 20px; width: 60px; height: 60px; background-color: #10B981; /* emerald-500 */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 1001; transition: all 0.3s ease; }
.call-button:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.call-button.blink { animation: call-blink 1.5s infinite; }
@keyframes call-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); } 50% { box-shadow: 0 0 0 12px rgba(16,185,129,0); } }

/* Micro interactions on cards */
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }