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

/* =========================================================
   STYLE.CSS — AXICON AUTOMATION (TAILWIND FRIENDLY)
   ---------------------------------------------------------
   HOW TO USE (IMPORTANT)
   ---------------------------------------------------------
   This file EXTENDS Tailwind CSS.
    Use these semantic utility classes like:
      text-primary
      bg-primary
      border-light
      btn btn-primary
      card
      breadcrumb

   Example usage in HTML:
   <h1 class="text-primary">Automation Solutions</h1>
   <p class="text-muted">Industrial-grade machinery</p>
   <div class="card bg-surface">...</div>


/* =========================================================
   ROOT VARIABLES — SINGLE SOURCE OF TRUTH
   ========================================================= */
:root {
  /* ── Brand / Primary ─────────────────────────── */
  --primary-color: #1773d0;       /* Brand blue — buttons, links, highlights     */
  --primary-dark:  #1e3a8a;       /* Deep navy — header background, dark accents */
  --primary-light: #0ea5e9;       /* Sky blue  — hover states, light highlights  */
  --secondary-color: #f97316;     /* Orange    — secondary brand accent           */

  /* ── Tailwind custom-color aliases ───────────── */
  /* These are referenced in tailwind.config and throughout components */
  --primary:   #ffffff;           /* White  — card/section light background       */
  --secondary: #f1f5f9;           /* Slate-100 — secondary surface background     */
  --trinary:   #eff6ff;           /* Blue-50   — tertiary/accent surface          */
  --off-white: #f8fafc;           /* Slate-50  — subtle off-white                 */

  /* ── Page Backgrounds ────────────────────────── */
  --bg-light:     #ffffff;        /* Main page body background                    */
  --bg-primary:   #ffffff;        /* Pure white — cards, modals                   */
  --bg-secondary: #f8fafc;        /* Light gray — alternate section backgrounds   */
  --bg-trinary:   #eff6ff;        /* Light blue — accent section backgrounds      */
  --bg-dark:      #0a1622;        /* Deep dark  — footer, dark sections           */

  /* ── Text Colors ─────────────────────────────── */
  --text-primary:   #1e293b;      /* Slate-800  — headings, primary text          */
  --text-secondary: #475569;      /* Slate-600  — body/paragraph text             */
  --text-light:     #ffffff;      /* White      — text on dark backgrounds        */

  /* ── Borders ─────────────────────────────────── */
  --border-light:    #e2e8f0;     /* Slate-200  — default light borders           */
  --border-dark:     #1e293b;     /* Slate-800  — dark/prominent borders          */
  --border-primary:  #1773d0;     /* Brand blue — primary focus/active borders    */
  --border-secondary:#bfdbfe;     /* Blue-200   — soft secondary borders          */
  --border-trinary:  #93c5fd;     /* Blue-300   — subtle accent borders           */
  --border-color:    #adb9c9;     /* Neutral     — general-purpose borders        */

  /* ── UI States ───────────────────────────────── */
  --hover-color:   #38bdf8;       /* Sky-400    — link / icon hover color         */
  --success-color: #22c55e;       /* Green-500  — success states, WhatsApp        */

  /* ── Fonts ───────────────────────────────────── */
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --font-serif: ui-serif, Georgia, 'Times New Roman', serif;
}


/* =========================================================
   BASE STYLES (GLOBAL)
   ========================================================= */
body {
  font-family: var(--font-poppins);
  line-height: 1.6;
  background-color: var(--bg-primary);
  color: var(--text-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
}


/* =========================================================
   COLOR UTILITY CLASSES
   ========================================================= */

/* Text Colors */
.text-primary {
  color: var(--text-primary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-light {
  color: var(--text-light) !important;
}

.text-brand {
  color: var(--primary-color) !important;
}

.text-brand-dark {
  color: var(--primary-dark) !important;
}

.text-accent {
  color: var(--secondary-color) !important;
}

/* Background Colors */
.bg-primary {
  background-color: var(--bg-primary) !important;
}

.bg-secondary {
  background-color: var(--bg-secondary) !important;
}

.bg-dark {
  background-color: var(--bg-dark) !important;
}

.bg-brand-dark {
  background-color: var(--primary-dark) !important;
}

.bg-accent {
  background-color: var(--secondary-color) !important;
}

/* Border Colors */
.border-color {
  border-color: var(--border-color) !important;
}

.border-dark {
  border-color: var(--border-dark) !important;
}

.border-brand {
  border-color: var(--primary-color) !important;
}



/* =========================================================
   BRAND GRADIENT UTILITIES
   (Tailwind CDN doesn't know 'brand' — define here globally)
   ========================================================= */

/* bg-brand */
.bg-brand {
  background-color: var(--primary-color) !important;
}
.hover\:bg-brand:hover {
  background-color: var(--primary-color) !important;
}
.bg-brand-dark {
  background-color: var(--primary-dark) !important;
}

/* Gradient from/to utilities */
.from-brand {
  --tw-gradient-from: var(--primary-color);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(23 115 208 / 0));
}
.to-brand {
  --tw-gradient-to: var(--primary-color);
}
.to-brand-dark {
  --tw-gradient-to: var(--primary-dark);
}
.hover\:to-brand-dark:hover {
  --tw-gradient-to: var(--primary-dark);
}
.hover\:bg-blue-700:hover {
  background-color: #1d4ed8 !important;
}

/* text-trinary used on dark/blue backgrounds (button labels) — force white */
.from-brand ~ *, .from-brand .text-trinary,
button.from-brand, button.bg-brand {
  color: #ffffff;
}

/* Ensure button text on brand gradient is always white */
.bg-gradient-to-r.from-brand {
  color: #ffffff;
}

/* Hero */
.text-first-heading {
  font-size: 1.5rem;
  font-weight: 900;
}

.text-second-heading {
  font-size: 0.2rem;
  font-weight: 500;
}

.text-third-heading {
  font-size: 1.8rem;
  font-weight: 800;
}

/* Section heading */
.text-fourth-heading {
  font-size: 1.7rem;
  font-weight: 800;
}

/* Subheading */
.text-fifth-heading {
  font-size: 1.1rem;
  font-weight: 500;
}

.text-six-heading {
  font-size: 0.8rem;
  font-weight: 400;
}

/* Body */
.text-general {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Caption */
.text-general-sm {
  font-size: 0.95rem;
  font-weight: 450;
}

/* Breakpoints */
@media (min-width: 640px) {
  .text-first-heading {
    font-size: 1.7rem;
  }

  .text-second-heading {
    font-size: 0.6rem;
  }

  .text-third-heading {
    font-size: 2.2rem
  }

  .text-fourth-heading {
    font-size: 1rem;
  }

  .text-fifth-heading {
    font-size: 1.2rem;
  }

  .text-six-heading {
    font-size: 0.9rem;
  }

  .text-general {
    font-size: 0.875rem;
  }

  .text-general-sm {
    font-size: 0.875rem;
  }
}

@media (min-width: 768px) {
  .text-first-heading {
    font-size: 1.9rem;
  }

  .text-second-heading {
    font-size: 0.7rem;
  }

  .text-third-heading {
    font-size: 2.5rem;
  }

  .text-fourth-heading {
    font-size: 1.25rem;
  }

  .text-fifth-heading {
    font-size: 1.2rem;
  }

  .text-six-heading {
    font-size: 0.9rem;
  }

  .text-general {
    font-size: 1rem;
  }

  .text-general-sm {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .text-first-heading {
    font-size: 3rem;
    line-height: 3.5rem;
  }

  .text-second-heading {
    font-size: 1.4rem;
  }

  .text-third-heading {
    font-size: 2.2rem
  }

  .text-fourth-heading {
    font-size: 1.7rem;
  }

  .text-fifth-heading {
    font-size: 1.1rem;
  }

  .text-six-heading {
    font-size: 0.9rem;
  }

  .text-general {
    font-size: 1.125rem;
  }

  .text-general-sm {
    font-size: 1rem;
  }
}

/* =========================================================
   WHATSAPP FLOATING BUTTON (DESKTOP/TABLET)
   ========================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  display: none;
  /* Hidden on small screens (mobile) */
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: all 0.3s ease;
  animation: pulse-whatsapp 2s infinite;
  text-decoration: none;
}

.whatsapp-float:visited,
.whatsapp-float:focus {
  color: #ffffff;
}

.whatsapp-float:hover {
  background-color: #1ebe57;
  transform: scale(1.1);
  color: #ffffff;

  cursor: pointer;
}

/* Show on desktop (>= 1024px) */
@media screen and (min-width: 1024px) {
  .whatsapp-float {
    display: flex;
  }
}

/* Smooth pulse animation */
@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* =========================================================
   SECTION BADGE
   ========================================================= */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  background-color: var(--bg-secondary);
  color: var(--primary-dark);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* =========================================================
   SECTION HEADING
   ========================================================= */
.section-heading {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

@media (min-width: 640px) {
  .section-heading {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 768px) {
  .section-heading {
    font-size: 3rem;
    line-height: 1;
  }
}
/* =========================================================
   DARK SECTION HEADING FIX
   Prevent global h1-h6 dark color from overriding white-on-dark sections.
   ========================================================= */
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #ffffff;
}