@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* Ensure all images are responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* Custom Global Variables & Reset */
:root {
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --color-primary: #dc2626; /* Crimson Red */
  --color-primary-dark: #b91c1c;
  --color-secondary: #0f172a; /* Slate Dark */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for sticky header */
}

body {
  font-family: var(--font-body);
  background-color: #0b0f19; /* Ultra dark slate background for premium look */
  color: #f8fafc;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
  border: 2px solid #0f172a;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Glassmorphism Styles */
.glass-header {
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(220, 38, 38, 0.3); /* Crimson Accent Border */
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 20px 0 rgba(220, 38, 38, 0.1);
}

.glass-modal {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Continuous Horizontal Marquee Loop */
.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-content {
  display: flex;
  flex-shrink: 0;
  gap: 3rem;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  animation: scroll-marquee 40s linear infinite;
}

.partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6rem;
  width: 14rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

.marquee-content img {
  filter: none !important;
  opacity: 1 !important;
}

/* Brand logo — source PNG is transparent; avoid opaque wrappers or JPEG swap */
.site-logo {
  display: block;
  height: 3.25rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
}

.site-logo--footer {
  height: 2.75rem;
  max-width: 10rem;
}

.light-mode .site-logo {
  filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.35));
}

/* Theme toggle tooltip */
.theme-toggle-wrap {
  position: relative;
}

.theme-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #f8fafc;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 60;
}

.theme-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0f172a;
}

.theme-toggle-wrap:hover .theme-tooltip,
.theme-toggle-wrap:focus-within .theme-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.light-mode .theme-tooltip {
  color: #0f172a;
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.light-mode .theme-tooltip::after {
  border-top-color: #ffffff;
}

.partner-logo {
  max-height: 4.5rem;
  width: auto;
}

/* Map — clickable pin */
.map-container {
  isolation: isolate;
}

.map-pin {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -100%);
  padding: 0;
  border: none;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease, color 0.2s ease;
}

.map-pin-icon {
  width: 2.25rem;
  height: auto;
  display: block;
}

.map-pin:hover,
.map-pin:focus-visible {
  color: #b91c1c;
  transform: translate(-50%, -100%) scale(1.08);
  outline: none;
}


.marquee-content img:hover {
  filter: none !important;
  opacity: 1 !important;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes scroll-marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Hide scrollbar utility */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Micro-animations and Utilities */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-radial {
  background: radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.15) 0%, rgba(11, 15, 25, 0) 60%);
}

.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(220,38,38,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Custom Hero Slide Transition classes */
.carousel-slide {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.carousel-slide .z-20 h1,
.carousel-slide .z-20 h2,
.carousel-slide .z-20 p,
.carousel-slide .z-20 .slide-animate {
  text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 4px rgba(0,0,0,0.5);
}

.carousel-slide .z-20 .carousel-btn-secondary {
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.carousel-slide.active {
  opacity: 1;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

#hero-carousel #carousel-dots {
  z-index: 20;
}

/* Pulse Glow Effects */
.pulse-glow {
  position: relative;
}
.pulse-glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(220, 38, 38, 0.5);
  animation: pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  opacity: 0;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* Image Hover Zoom Utility */
.hover-zoom img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-zoom:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   Light Mode Premium Theme Overrides
   ========================================================================== */
.light-mode {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

.light-mode body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

.light-mode .bg-slate-950,
.light-mode #mobile-menu {
  background-color: #f8fafc !important;
}

.light-mode .bg-slate-900,
.light-mode .bg-slate-900\/50,
.light-mode .bg-slate-950\/40,
.light-mode .bg-slate-900\/40,
.light-mode .bg-slate-950\/95,
.light-mode select,
.light-mode input,
.light-mode textarea {
  background-color: #f1f5f9 !important;
}

.light-mode .glass-header {
  background: rgba(248, 250, 252, 0.8) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

.light-mode .glass-card {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06) !important;
}

.light-mode .glass-card:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12), 0 0 20px 0 rgba(220, 38, 38, 0.05) !important;
}

.light-mode .border-slate-800,
.light-mode .border-slate-700\/80,
.light-mode .border-slate-900,
.light-mode .border-white\/5 {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

.light-mode .text-slate-100,
.light-mode h1,
.light-mode h2,
.light-mode h3,
.light-mode h4,
.light-mode h5,
.light-mode h6,
.light-mode .font-heading,
.light-mode a.hover\:text-white:hover {
  color: #0f172a !important;
}

.light-mode .text-slate-300,
.light-mode .text-slate-400,
.light-mode nav a.text-slate-300 {
  color: #334155 !important;
}

.light-mode nav a.text-slate-300:hover,
.light-mode #mobile-menu a.text-slate-300:hover {
  color: #000000 !important;
}

.light-mode .text-slate-500 {
  color: #64748b !important;
}

.light-mode input,
.light-mode select,
.light-mode textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.light-mode input:focus,
.light-mode select:focus,
.light-mode textarea:focus {
  border-color: #dc2626 !important;
}

.light-mode input::placeholder,
.light-mode textarea::placeholder {
  color: #94a3b8 !important;
}

/* Gradients text/bg overrides for light theme */
.light-mode .text-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #334155 50%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.light-mode .bg-gradient-radial {
  background: radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.06) 0%, rgba(248, 250, 252, 0) 60%) !important;
}

.light-mode .carousel-slide .bg-gradient-to-r {
  background-image: linear-gradient(to right, rgba(248, 250, 252, 0.95) 0%, rgba(248, 250, 252, 0.65) 60%, transparent 100%) !important;
}

.light-mode .carousel-slide .bg-gradient-to-t {
  background-image: linear-gradient(to top, rgba(248, 250, 252, 0.95) 0%, transparent 100%) !important;
}

.light-mode .bg-gradient-to-r.from-white.to-red-500 {
  background-image: linear-gradient(to right, #0f172a, #dc2626) !important;
}

/* Modals & Popups for Light mode */
.light-mode .modal-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

.light-mode .glass-modal {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .lightbox-close,
.light-mode .lightbox-prev,
.light-mode .lightbox-next {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

.light-mode .lightbox-close:hover,
.light-mode .lightbox-prev:hover,
.light-mode .lightbox-next:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* Border Gradient helper adjust */
.light-mode .border-gradient::before {
  background: linear-gradient(to bottom, rgba(15,23,42,0.08), rgba(220,38,38,0.35)) !important;
}

.light-mode .carousel-slide span.bg-brand\/10 {
  background-color: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
}

.light-mode .carousel-slide .z-20 h1,
.light-mode .carousel-slide .z-20 h2,
.light-mode .carousel-slide .z-20 p,
.light-mode .carousel-slide .z-20 .slide-animate {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
}

.light-mode .carousel-slide .z-20 .carousel-btn-secondary {
  text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

/* Carousel outline / secondary CTA — black text on light overlay */
.light-mode .carousel-slide .carousel-btn-secondary,
.light-mode .carousel-slide a.border-slate-700 {
  color: #000000 !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.25) !important;
}

.light-mode .carousel-slide .carousel-btn-secondary:hover,
.light-mode .carousel-slide a.border-slate-700:hover {
  color: #000000 !important;
  background-color: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.4) !important;
}

/* Ticker cards */
.light-mode .marquee-container {
  mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
}

.light-mode .marquee-container .bg-slate-950\/40 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .marquee-container img {
  filter: none !important;
  opacity: 1 !important;
}

.light-mode .marquee-container img:hover {
  filter: none !important;
  opacity: 1 !important;
}

/* Floating Locations adjust */
.light-mode .h-44.bg-slate-900 {
  background-color: #f1f5f9 !important;
}

.light-mode .pulse-glow::after {
  border-color: rgba(220, 38, 38, 0.35) !important;
}

.light-mode .bg-[radial-gradient\(\#1e293b_1px\)] {
  background-image: radial-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px) !important;
}

/* Dark mode — header Contact Us button text turns black on focus/click */
header a[href="#message"]:focus {
  color: #000000 !important;
}

/* Light mode — header Contact Us button (remove red background) */
.light-mode header a[href="#message"] {
  background-color: transparent !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.25) !important;
}

.light-mode header a[href="#message"]:hover {
  background-color: rgba(15, 23, 42, 0.05) !important;
}

/* Keep Footer Dark to anchor the visual weight beautifully */
.light-mode footer {
  background-color: #0b0f19 !important;
}

.light-mode footer .text-slate-100,
.light-mode footer h4,
.light-mode footer span.text-white,
.light-mode footer a {
  color: #ffffff !important;
}

.light-mode footer .text-slate-400,
.light-mode footer ul a {
  color: #94a3b8 !important;
}

.light-mode footer ul a:hover {
  color: #dc2626 !important;
}

.light-mode footer .text-slate-500 {
  color: #475569 !important;
}

.light-mode footer .border-t {
  border-color: #1e293b !important;
}

.light-mode footer input {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.light-mode footer input::placeholder {
  color: #64748b !important;
}

.light-mode footer button {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.light-mode footer button:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}