/*
  Axora Net Media Ultra Stylesheet

  This stylesheet defines the aesthetic for Axora Net Media's website.
  It blends a glassmorphism look with modern dark themes inspired by
  premium technology brands. The file also contains styles for
  interactive components like sliders, tabs, accordions, galleries,
  modals, progress bars, and more. If you need to adjust colors or
  spacing, use the CSS variables at the top of the file. All pages
  share this stylesheet so modifications propagate across the site.
*/

/* CSS variables for colors, spacing, and transitions */
:root {
  --color-bg: #020617; /* deep navy background */
  --color-card-bg: rgba(15, 23, 42, 0.5); /* card glass background */
  --color-card-border: rgba(255, 255, 255, 0.07);
  --color-primary: #38bdf8; /* cyan */
  --color-secondary: #a855f7; /* violet */
  --color-accent: #ecfeff; /* very light cyan */
  --color-text: #e2e8f0; /* slate-200 */
  --color-muted: #94a3b8; /* slate-400 */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --transition: 0.25s ease-in-out;
}

/* Reset margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.5;
  scroll-behavior: smooth;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-accent);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin-bottom: 1rem;
  max-width: 70ch;
}

/* Utility classes for spacing */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Center block utility for CTA and footer alignment */
.center-block {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-8 { padding-bottom: 2rem; }

/* Glass card style */
.glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform var(--transition), box-shadow var(--transition);
}
.glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Story grid layout for About page: ensures text on left and image on right on wide screens */
.story-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.story-grid .story-text {
  flex: 1 1 360px;
  min-width: 280px;
}
.story-grid .story-image {
  flex: 1 1 360px;
  max-width: 420px;
  min-width: 280px;
}

/* Navigation bar */
nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
nav a {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}
nav a.active {
  color: var(--color-primary);
}
nav a:hover {
  background: rgba(255,255,255,0.05);
  color: var(--color-accent);
}

/* FOMO bar */
.promo-bar {
  width: 100%;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  color: var(--color-bg);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Header */
header {
  position: sticky;
  top: 3rem;
  z-index: 900;
  padding-top: 0.5rem;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
}

/* Hamburger / mobile nav */
.mobile-menu-button {
  display: none;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.mobile-nav a {
  background: var(--color-card-bg);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
}

/* Hero section */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
}

@media (min-width: 768px) {
  .hero {
    grid-template-columns: repeat(2, 1fr);
  }
  .mobile-menu-button {
    display: none;
  }
  .mobile-nav {
    display: none;
  }
}

@media (max-width: 767px) {
  nav {
    display: none;
  }
  .mobile-menu-button {
    display: block;
  }
  .mobile-nav.show {
    display: flex;
  }
}

/* Sections */
section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
.section-subtitle {
  font-size: 1rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--color-muted);
}

/* Feature cards */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.feature-card p {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Counters */
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.counter {
  text-align: center;
}
.counter-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}
.counter-label {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Testimonials slider */
.slider {
  position: relative;
  overflow: hidden;
}
.slide-track {
  display: flex;
  transition: transform var(--transition);
}
.slide {
  min-width: 100%;
  flex-shrink: 0;
  padding: 1rem;
  box-sizing: border-box;
}
.slide p {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.slide .author {
  font-weight: 500;
  color: var(--color-accent);
}
.slider-controls {
  text-align: center;
  margin-top: 1rem;
}
.slider-controls button {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--transition);
}
.slider-controls button:hover {
  background: rgba(255,255,255,0.05);
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.tab-button {
  padding: 0.5rem 1rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition);
}
.tab-button.active {
  background: var(--color-primary);
  color: var(--color-bg);
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* Accordion */
.accordion-item {
  border-bottom: 1px solid var(--color-card-border);
  padding: 1rem 0;
}
.accordion-title {
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-content {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.accordion-item.active .accordion-content {
  display: block;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-card-border);
  cursor: pointer;
  transition: transform var(--transition);
}
.gallery img:hover {
  transform: scale(1.03);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal-overlay.show {
  display: flex;
}
.modal {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}
.modal-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-card-border);
}
.modal-body {
  padding: 1rem;
  overflow-y: auto;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
}

/* Video modal content */
.modal iframe {
  width: 100%;
  height: 450px;
  border: none;
}

/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
.preloader.hidden {
  display: none;
}
.preloader .spinner {
  border: 4px solid var(--color-card-border);
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--color-primary);
  z-index: 999;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  bottom: 5rem; /* place above the back-to-top button */
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366; /* WhatsApp green */
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  z-index: 850;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: filter var(--transition), transform var(--transition);
}
.whatsapp-float:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Center section titles and subtitles */
.section-title,
.section-subtitle {
  text-align: center;
}

/* Ensure images fill their containers without distortion */
img {
  object-fit: cover;
}

/* Dark mode toggles – apply via JS to body.dark */
.dark {
  background: #f0f4fc;
  color: #04192b;
}
.dark .glass {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.dark nav a {
  color: #04192b;
}
.dark nav a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--color-primary);
}
.dark .feature-card {
  background: rgba(255,255,255,0.5);
  border-color: rgba(0,0,0,0.05);
}
.dark .accordion-item {
  border-color: rgba(0,0,0,0.1);
}
.dark .modal {
  background: rgba(255,255,255,0.8);
  color: #04192b;
}