@import url("/assets/fonts/fontawesome4/css/font-awesome.css");
@import url("/assets/fonts/fontawesome6/css/fontawesome.css");
@import url("/assets/fonts/fontawesome6/css/brands.css");
@import url("/assets/fonts/fontawesome6/css/solid.css");
@import url("/assets/fonts/stylesheet.css");


:root {
  /* Colors */
  --surface-dim: #d8dadd;
  --surface-container-high: #e6e8eb;
  --secondary-fixed: #dde3ee;
  --outline: #737780;
  --on-tertiary-container: #91296E;
  --on-secondary-container: #5f656e;
  --on-primary-container: #d1d1d1;
  --on-secondary-fixed-variant: #414750;
  --surface-container-low: #f2f4f7;
  --tertiary: #381200;
  --on-primary-fixed-variant: #1f477b;
  --on-tertiary-fixed-variant: #7a3000;
  --on-primary-fixed: #001b3c;
  --inverse-on-surface: #eff1f4;
  --on-surface-variant: #43474f;
  --tertiary-fixed-dim: #ffb692;
  --primary-fixed-dim: #a7c8ff;
  --secondary-fixed-dim: #c1c7d2;
  --surface: #f7f9fc;
  --primary-container: #003366;
  --surface-container: #eceef1;
  --on-error-container: #93000a;
  --on-surface: #191c1e;
  --surface-tint: #3a5f94;
  --surface-bright: #f7f9fc;
  --on-primary: #ffffff;
  --inverse-surface: #2d3133;
  --primary-fixed: #d5e3ff;
  --on-error: #ffffff;
  --tertiary-container: #5a2200;
  --error-container: #ffdad6;
  --surface-container-lowest: #ffffff;
  --secondary: #595f68;
  --surface-variant: #e0e3e6;
  --error: #ba1a1a;
  --background: #f7f9fc;
  --on-background: #191c1e;
  --outline-variant: #c3c6d1;
  --tertiary-fixed: #ffdbcb;
  --on-secondary: #ffffff;
  --surface-container-highest: #e0e3e6;
  --on-tertiary-fixed: #341100;
  --on-tertiary: #ffffff;
  --on-secondary-fixed: #161c24;
  --primary: #101314;
  --inverse-primary: #a7c8ff;
  --secondary-container: #dde3ee;

  /* Font Families */
  --font-headline: 'against', sans-serif;
  --font-body: 'Metropolis', sans-serif;
  --font-label: 'Metropolis', sans-serif;
  --font-nav: 'Metropolis', sans-serif;

}

body {
  font-family: var(--font-body);
  background-color: var(--surface);
  color: var(--on-surface);
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}


h1,
h2,
h3,
.brand-font,
.font-headline {
  font-family: var(--font-headline);
}

::selection {
  background-color: var(--on-tertiary-container);
  color: #fff;
}

h1 {
  line-height: 1.5;
}

h1,
h2 {
  color: #fff;
  background: linear-gradient(70.14deg, #191321 1.24%, #341941 14.41%, #91296E 52.69%, #EEA60F 81.71%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

a {
  text-decoration: none;
  color: inherit;
}


blockquote {
  background: linear-gradient(70.14deg, #191321 1.24%, #341941 14.41%, #91296E 52.69%, #EEA60F 81.71%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

}

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

/* Custom Backgrounds & Gradients */
.bg-surface {
  background-color: var(--surface) !important;
}

.bg-surface-container-low {
  background-color: var(--surface-container-low) !important;
}

.bg-surface-container-highest {
  background-color: var(--surface-container-highest) !important;
}

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

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

.bg-on-tertiary-container {
  /* background-color: var(--on-tertiary-container) !important; */
  background: linear-gradient(70.14deg, #191321 1.24%, #341941 14.41%, #91296E 52.69%, #EEA60F 81.71%);

}

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

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

.text-on-surface-variant {
  color: var(--on-surface-variant) !important;
}

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

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

.text-on-tertiary-container {
  color: var(--on-tertiary-container) !important;
}

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

/* Dynamic Borders */
.border-primary {
  border-color: var(--primary) !important;
}

.border-on-tertiary-container {
  border-color: var(--on-tertiary-container) !important;
}

.border-outline-variant {
  /* border-color: var(--outline-variant) !important; */
  border-color: #c1a186 !important;
}

/* Tracking / Spacing / Typography */
.tracking-widest {
  letter-spacing: 0.1em;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.leading-tight {
  line-height: 1.25;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.font-black {
  font-weight: 900 !important;
}

/* Custom Visuals */
.blueprinted-grid {
  background-image: radial-gradient(circle, var(--outline-variant) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: rgba(247, 249, 252, 0.4);
}

.machined-gradient {
  /* background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%); */
  /* background: linear-gradient(135deg, #466867 0%, #879C9B 100%); */
  background: linear-gradient(70.14deg, #191321 1.24%, #341941 14.41%, #91296E 52.69%, #EEA60F 81.71%);
}

.text-white {
  color: #fff !important;
}

.text-nav {
  color: #91296E !important;
}

.text-nav-sec {
  color: #231F20 !important;
}

.fw-nav {
  font-weight: 600 !important;
}

.fw-nav-normal {
  font-weight: 400 !important;
}

.btn-outline-nave {
  color: #231F20 !important;
  border: 1px solid #000000 !important;
  border-radius: 2px !important;
}

.btn-outline-nave:hover {
  background-color: #91296E !important;
  color: #fff !important;
}

.bg-nsid {
  background-color: #EEE0D7;
}

.bg-why-choose {
  background-color: #F7F9FC;
}

.bg-nsid2 {
  /* background-color: #E8CAB0; */
  background: #fff;
}

.bg-projects {
  background-color: #fff7fd;
}

.grayscale-40-contrast-110 {
  filter: grayscale(40%) contrast(1.1);
}

.hero-overlay {
  /* background: linear-gradient(0deg, rgba(0, 30, 64, 0.95), rgba(0, 30, 64, 0.7), transparent); */
  background: linear-gradient(0deg, #191321 30%, #91296E 50%, transparent 70%);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

/* Transitions and Hover Effects */
.transition-all {
  transition: all 0.3s ease;
}

.hover-translate-y:hover {
  transform: translateY(-2px);
}

.group-hover-scale:hover img {
  transform: scale(1.05);
}

.group-hover-icon-scale:hover .material-symbols-outlined {
  transform: scale(1.1);
}

.group-hover-grayscale-0 .aspect-square {
  filter: grayscale(1);
}

.group-hover-grayscale-0:hover .aspect-square {
  filter: grayscale(0);
}

.active-scale-95:active {
  transform: scale(0.95);
}

/* Component specifics */
.hover-shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Aspect ratio helpers for bootstrap */
.aspect-4-5 {
  aspect-ratio: 4 / 5;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.object-cover {
  object-fit: cover;
}

/* Grid icon decoration */
.icon-huge {
  font-size: 30rem;
}


#back-to-top {
  background: var(--on-tertiary-container);
  position: fixed;
  bottom: -40px;
  right: 20px;
  z-index: 1020;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 30px;
  cursor: poInter;
  padding-top: 3px;
  border: 0;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
  outline: none;
  opacity: 0;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
}

#back-to-top:hover {
  transform: scale(1.1);
}

#back-to-top.show {
  bottom: 20px;
  opacity: 1;
}

#back-to-top.hide {
  bottom: -40px;
}

#back-to-top:before {
  font-family: "FontAwesome";
  font-size: 18px;
  content: "\f106";
  color: #fff !important;
  position: relative;
}

.show-on-scroll {
  opacity: 0;
}

.show-on-scroll.show {
  opacity: 1;
}

.show-on-scroll.hide {
  opacity: 0;
}

.show-on-scroll {
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  transition: .5s;
  outline: none;
}

/* App Tile Styling */
.app-tile {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.app-tile.bg-white {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.app-tile.blank {
  background-color: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.02), inset 0 0 0 1px rgba(0, 0, 0, 0.01);
}

/* Pill Badge Styling */
.pill-badge {
  padding: 8px 14px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.85rem;
  font-weight: 500;
  color: #495057;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.3s ease;
  font-family: var(--font-body);
}

.pill-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.pill-icon.orange {
  background: rgba(253, 126, 20, 0.15);
  color: #fd7e14;
}

.pill-icon.green {
  background: rgba(32, 201, 151, 0.15);
  color: #20c997;
}

.pill-icon.blue {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
}

/* Ticker Marquee left-to-right */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background-color: #879C9B;
  background: linear-gradient(70.14deg, #191321 1.24%, #341941 14.41%, #91296E 52.69%, #EEA60F 81.71%);
  /* Pale sage green matching reference */
  padding: 1.5rem 0;
  white-space: nowrap;
  display: flex;
}

.ticker-content {
  display: flex;
  flex-shrink: 0;
  animation: ticker-ltr 30s linear infinite;
  min-width: 200%;
  /* Ensure it's wide enough to loop nicely */
}

@keyframes ticker-ltr {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.ticker-item {
  display: inline-block;
  padding: 0 3rem;
  font-size: 1.8rem;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.70);
  font-weight: 500;
}

.ticker-item.active {
  color: #fff;
  font-weight: 700;
}

.aspect-4-5 {
  aspect-ratio: 4 / 5;
}

.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.card-hover-bg-img {
  opacity: 0;
  transform: scale(0.9) translateX(10px);
  filter: grayscale(1);
}

.group:hover .card-hover-bg-img {
  opacity: 0.25;
  transform: scale(1) translateX(0);
  filter: grayscale(0);
}

/* Enhanced Micro Animations */
.micro-hover-float {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

.micro-hover-float:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -5px rgba(0, 0, 0, 0.05) !important;
}

.micro-nav-link {
  position: relative;
  display: inline-block;
}

.micro-nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #752460;
  transition: width 0.3s ease-in-out;
}

.micro-nav-link:hover::after,
.micro-nav-link.active::after {
  width: 100%;
}

.micro-btn-shine {
  position: relative;
  overflow: hidden;
}

.micro-btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
  z-index: 1;
}

.micro-btn-shine:hover::before {
  left: 150%;
}

@keyframes icon-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

.micro-icon-pulse {
  display: inline-block;
  transition: transform 0.3s ease;
}

.micro-icon-pulse:hover {
  animation: icon-pulse 1s infinite alternate;
}

.micro-card-zoom-content {
  overflow: hidden;
}

.micro-card-zoom-content>* {
  transition: transform 0.4s ease;
}

.group-hover-card-zoom:hover .micro-card-zoom-content>* {
  transform: scale(1.02) translateY(-2px);
}

.hover-rotate-icon:hover .material-symbols-outlined {
  transform: rotate(15deg) scale(1.1);
  transition: transform 0.3s ease;
}

.micro-text-glow:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  transition: text-shadow 0.3s ease;
}

/* Testimonial Responsive Layout */
.testimonial-img-col {
  width: 100%;
}

.testimonial-content-col {
  width: 100%;
}

.width-50 {
  width: 50%;
}

@media (min-width: 768px) {
  .testimonial-img-col {
    width: 35%;
  }

  .testimonial-content-col {
    width: 65%;
  }

}

@media (max-width: 768px) {

  .aspect-video {
    aspect-ratio: 4 / 5;
  }

  .width-50 {
    width: 100%;
  }
}

/* ── Project Slider Pagination ─────────────────────────────────────────── */
.project-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transition: background 0.3s ease, transform 0.3s ease;
}

.project-pagination .swiper-pagination-bullet-active {
  background: #EEA60F;
  transform: scale(1.35);
}