/* Overseas IT Solution - Common Stitch UI Design System stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
@import url('flaticon.css');
@import url('fontawesome-all.css');

:root {
  --stitch-primary: #126b7e;
  --stitch-secondary: #E3A83B;
  --stitch-brand-orange: #f6763c;
  --stitch-navy-alt: #0f172a;
  --stitch-surface: #ffffff;
  --stitch-background: #ffffff;
  --stitch-ink-soft: #525C70;
  --stitch-ink-faint: #8992A3;
  --stitch-line: #E2E5EB;
  --stitch-line-dark: #1e293b;
  --stitch-font-headline: 'Space Grotesk', sans-serif;
  --stitch-font-body: 'Inter', sans-serif;
  --stitch-font-mono: 'JetBrains Mono', monospace;
}

body {
  background-color: #ffffff !important;
}

/* Material symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Technical Grid Pattern */
.technical-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(18, 107, 126, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
}

/* Terminal Cursor */
.terminal-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  from,
  to {
    color: transparent;
  }

  50% {
    color: var(--stitch-secondary);
  }
}

/* Common Header Styles */
header.fixed.top-0 {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--stitch-line) !important;
}

/* Common Footer Styles */
footer,
footer.bg-navy-alt,
.bg-navy-alt,
.main-footer {
  background-color: #162e38 !important;
  border-top: 1px solid var(--stitch-line-dark) !important;
}

@media (min-width: 640px) {
  .sm\:text-base {
    font-size: 1.19rem !important;
    line-height: 1.6rem;
  }
}

/* Universal UI Brand Palette Utility Overrides */
a:hover {
  color: var(--stitch-primary);
}

.text-primary,
.text-theme-primary {
  color: var(--stitch-primary) !important;
}

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

.bg-primary,
.bg-theme-primary {
  background-color: var(--stitch-primary) !important;
}



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

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

.bg-brand-orange {
  background-color: var(--stitch-brand-orange) !important;
}

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

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

.bg-navy-alt {
  background-color: var(--stitch-navy-alt) !important;
}

.text-navy-alt {
  color: var(--stitch-navy-alt) !important;
}

.bg-background {
  background-color: #d6d6d6 !important;
}

/* New section / Card background white */
.bg-surface,
section.bg-white,
div.bg-white,
.card,
.case-study-card,
.service-card,
.feature-card {
  background-color: #ffffff !important;
}

/* Clickable section / Card hover radial-gradient effect */
.clickable-section:hover,
a.group:hover,
div.group:not(.bg-gradient-to-br):hover,
.case-study-card:hover,
.card:hover,
.hover-radial-grid:hover {
  background-image: radial-gradient(circle at 1px 1px, rgb(18 102 120 / 5%) 1px, transparent 0) !important;
  background-size: 40px 40px !important;
}

/* Global Button Base & Hover Rules */
a.btn-theme,
button.btn-theme,
.btn,
.font-button[class*="bg-brand-orange"],
.font-button[class*="bg-[#f6763c]"],
a[class*="bg-[#f6763c]"],
button[class*="bg-[#f6763c]"],
a[class*="bg-brand-orange"],
button[class*="bg-brand-orange"] {
  background-color: #f6763c !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

a.btn-theme:hover,
button.btn-theme:hover,
.btn:hover,
.font-button[class*="bg-brand-orange"]:hover,
.font-button[class*="bg-[#f6763c]"]:hover,
a[class*="bg-[#f6763c]"]:hover,
button[class*="bg-[#f6763c]"]:hover,
a[class*="bg-brand-orange"]:hover,
button[class*="bg-brand-orange"]:hover {
  background-color: #126b7e !important;
  color: #ffffff !important;
}

/* Universal Button Font Size Override: 1.19rem */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
.btn-theme,
.text-button,
.font-button,
a.btn,
a.btn-theme,
a[class*="rounded-full"],
a[class*="rounded-xl"],
a[class*="rounded-lg"],
button[class*="rounded-"] {
  font-size: 1.19rem !important;
}


@media (min-width: 640px) {
  .sm\:text-\[10px\] {
    font-size: 14px !important;
  }
}

.text-xl {
  font-size: 1.55re !important;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 1rem !important;
  line-height: 1.25rem;
}

/* Scroll Reveal & Micro Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.visible,
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
}