.skills-table {
  border-collapse: separate;
  border-spacing: 20px;
  width: 100%;
  margin: 0 auto 32px auto;
}
.icon-card {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: transparent;
  position: relative;
  overflow: visible;
  margin-bottom: 12px;
}
.icon-card::before {
  /* animated gradient ring around the icon */
  content: "";
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 18px;
  padding: 4px;
  background: linear-gradient(120deg, #00f0ff, #00b8e6, #00f0ff);
  background-size: 200% 200%;
  z-index: 0;
  /* Use mask to create a hollow ring so center stays transparent */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: borderAnim 2.5s linear infinite;
}
.icon-card::after {
  /* inner backdrop to ensure visibility on dark bg */
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.icon-card .choice-icon {
  font-size: 3.2rem;
  color: #ffffff;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
}
@media (max-width: 480px) {
  .icon-card { width: 100px; height: 100px; }
  .icon-card .choice-icon { font-size: 2rem; }
}

/* Specific layout for the Why Clients section: center three icon-only items */
#services-2 .services-cards {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 36px 28px;
  justify-items: center;
  max-width: 860px;
}

.icon-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent; /* no card background */
  box-shadow: none;
}
.icon-only .choice-label {
  color: #eaf6ff;
  font-weight: 700;
  font-size: 1rem;
}
.icon-only .icon-card {
  transition: transform 280ms ease, filter 280ms ease;
}
.icon-only:hover .icon-card {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 12px 28px rgba(0,240,255,0.28));
}

@media (max-width: 767.98px) {
  #services-2 .services-cards { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
}
.placeholder-card {
  background: linear-gradient(135deg, rgba(0,240,255,0.26) 0%, rgba(0,71,171,0.18) 100%);
  color: #00f0ff;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 18px;
  box-shadow: 0 2px 18px rgba(0,240,255,0.28);
  border: 3px solid transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .placeholder-card {
    font-size: 1rem;
    height: 140px;
  }
}

/* Icon + label for Why Clients cards */
.choice-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.choice-icon {
  font-size: 2.4rem;
  color: #00c3ff;
  margin-bottom: 12px;
  transition: transform 240ms ease, filter 240ms ease;
  filter: drop-shadow(0 4px 12px rgba(0,240,255,0.28));
}
.choice-label {
  color: #eaf6ff;
  font-weight: 700;
  text-align: center;
  font-size: 1rem;
  padding: 0 8px;
}
.placeholder-card:hover .choice-icon {
  transform: translateY(-6px) scale(1.06);
  filter: drop-shadow(0 8px 18px rgba(0,240,255,0.45));
}

@media (max-width: 480px) {
  .choice-icon { font-size: 1.8rem; margin-bottom:8px; }
  .choice-label { font-size: 0.95rem; }
}

/* Icon-card square style (icon is the card) */
.icon-card {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.icon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 3px;
  background: linear-gradient(120deg, #00f0ff, #00b8e6, #00f0ff);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: borderAnim 2.5s linear infinite;
  z-index: 0;
}
.icon-card .choice-icon {
  font-size: 2.2rem;
  color: #fff;
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}
@media (max-width: 480px) {
  .icon-card { width: 96px; height: 96px; }
  .icon-card .choice-icon { font-size: 1.6rem; }
}
/* Service cards layout for mobile and desktop */
.services-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 24px;
  justify-content: center;
  align-items: stretch;
  margin-top: 40px;
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.service-card {
  position: relative;
  background: linear-gradient(135deg, rgba(4,1,69,0.95) 60%, rgba(0,0,42,0.95) 100%);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  color: #fff;
  padding: 0;
  font-size: 1.12rem;
  font-weight: 600;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  transition: box-shadow 0.3s, border 0.3s, transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 18px;
  padding: 2px;
  z-index: -1;
  background: linear-gradient(120deg, #00f0ff, #00b8e6, #00f0ff);
  background-size: 200% 200%;
  animation: borderAnim 2.5s linear infinite;
}

@keyframes borderAnim {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* New diagonal sweep that travels from top-left to bottom-right and pulses */
@keyframes borderSweep {
  0% { background-position: 0% 0%; opacity: 0.60; filter: drop-shadow(0 6px 20px rgba(0,240,255,0.18)); }
  40% { background-position: 60% 60%; opacity: 1; filter: drop-shadow(0 18px 48px rgba(0,240,255,0.36)); }
  100% { background-position: 100% 100%; opacity: 0.60; filter: drop-shadow(0 6px 20px rgba(0,240,255,0.18)); }
}

@keyframes borderPulse {
  0% { transform: scale(1); filter: drop-shadow(0 8px 20px rgba(0,240,255,0.18)); opacity: 0.9; }
  50% { transform: scale(1.035); filter: drop-shadow(0 28px 72px rgba(0,240,255,0.45)); opacity: 1; }
  100% { transform: scale(1); filter: drop-shadow(0 8px 20px rgba(0,240,255,0.18)); opacity: 0.9; }
}

/* Stagger delays for 5x3 skills-table so the sweep travels top-left -> bottom-right */
.skills-table tr:nth-child(1) td:nth-child(1) .skill-card::before { animation-delay: 0s; }
.skills-table tr:nth-child(1) td:nth-child(2) .skill-card::before { animation-delay: 0.08s; }
.skills-table tr:nth-child(1) td:nth-child(3) .skill-card::before { animation-delay: 0.16s; }
.skills-table tr:nth-child(1) td:nth-child(4) .skill-card::before { animation-delay: 0.24s; }
.skills-table tr:nth-child(1) td:nth-child(5) .skill-card::before { animation-delay: 0.32s; }
.skills-table tr:nth-child(2) td:nth-child(1) .skill-card::before { animation-delay: 0.40s; }
.skills-table tr:nth-child(2) td:nth-child(2) .skill-card::before { animation-delay: 0.48s; }
.skills-table tr:nth-child(2) td:nth-child(3) .skill-card::before { animation-delay: 0.56s; }
.skills-table tr:nth-child(2) td:nth-child(4) .skill-card::before { animation-delay: 0.64s; }
.skills-table tr:nth-child(2) td:nth-child(5) .skill-card::before { animation-delay: 0.72s; }
.skills-table tr:nth-child(3) td:nth-child(1) .skill-card::before { animation-delay: 0.80s; }
.skills-table tr:nth-child(3) td:nth-child(2) .skill-card::before { animation-delay: 0.88s; }
.skills-table tr:nth-child(3) td:nth-child(3) .skill-card::before { animation-delay: 0.96s; }
.skills-table tr:nth-child(3) td:nth-child(4) .skill-card::before { animation-delay: 1.04s; }
.skills-table tr:nth-child(3) td:nth-child(5) .skill-card::before { animation-delay: 1.12s; }

/* Optionally reduce animation on reduced-motion prefs */
@media (prefers-reduced-motion: reduce) {
  .skill-card::before { animation: none !important; }
  .skill-card { transition: none !important; }
}

.service-card:hover {
  box-shadow: 0 18px 54px rgba(0,0,0,0.34), 0 28px 90px rgba(102,194,255,0.42);
  border-color: #66c2ff;
  transform: translateY(-16px) scale(1.045);
}

@media (max-width: 1200px) {
  .services-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .services-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Skill-card styles applied to the Our Services table cells */
.skill-card {
  position: relative;
  display: flex;
  flex-direction: column; /* Stack image/icon and text vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  min-height: 180px; /* Good size for table cards */
  padding: 1.25rem; /* Comfortable padding */
  background: transparent;
  border-radius: 14px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(.2,.9,.3,1), box-shadow 280ms ease;
}
.skill-card::before {
  /* animated outer ring */
  content: "";
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(120deg, #00f0ff, #00b8e6, #0077cc);
  background-size: 220% 220%;
  z-index: -2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* diagonal sweep + pulse; delays will be applied per-table-cell to create a traveling effect */
  animation: borderSweep 2.2s linear infinite, borderPulse 2.2s ease-in-out infinite;
}
.skill-card::after {
  /* inner backdrop to maintain contrast */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.35));
  z-index: -1;
}
.skill-card img { max-width: 64px; height: auto; margin-bottom: 12px; z-index: 1; }
.skill-card:hover {
  transform: translateY(-12px) scale(1.025);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45), 0 30px 90px rgba(102,194,255,0.36), inset 0 2px 8px rgba(255,255,255,0.02);
}
@media (max-width: 900px) {
  .skill-card { min-height: 140px; padding: 1rem; }
}


@media (max-width: 767.98px) {
  .services-cards {
    grid-template-columns: 1fr 1fr;
    gap: 12px 8px;
    margin-top: 14px;
    max-width: 100%;
  }
  .service-card {
    font-size: 0.98rem;
    padding: 12px 8px;
  }
}
/* Mobile full-screen section optimization */
@media (max-width: 767.98px) {
  /* Only make the intro/hero full-screen on mobile; allow normal scrolling for other sections */
  #intro, #introCarousel, .home, .carousel-item {
    min-height: 100vh !important;
    height: 100vh !important;
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-item {
    background-size: cover !important;
    background-position: center !important;
    /* provide a dark fallback background so framed/contain images don't show as white */
    background-color: #00002a !important;
  }
  body {
    overflow-x: hidden !important;
  }
}

/* Absolute IMG fallback for carousel backgrounds (ensures mobile loads images reliably) */
.carousel-item { position: relative; overflow: hidden; }
.carousel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0; /* sit behind mask but above the element background */
  display: block;
  pointer-events: none;
}

/* Smooth fade-in for loaded carousel images to avoid white flashes */
.carousel-bg { opacity: 0; transition: opacity 320ms ease; will-change: opacity, transform; }
.carousel-item.bg-loaded .carousel-bg { opacity: 1; }
.carousel-item.bg-error .carousel-bg { opacity: 0.12; filter: grayscale(0.6) contrast(0.8); }

/* Force background-image fallback to behave consistently */
.carousel-item { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }

/* Reduce background-image repaint and ensure mask sits above the img */
.carousel-item .mask { position: relative; z-index: 2; pointer-events: none; }

/* mask states while background img is loading/errored */
.carousel-item.bg-loading .mask { background-color: rgba(0,0,0,0.62) !important; transition: background-color 280ms ease; }
.carousel-item.bg-loaded .mask { background-color: rgba(0,0,0,0.36) !important; transition: background-color 320ms ease; }
.carousel-item.bg-error .mask { background-color: rgba(0,0,0,0.72) !important; }

/* Ensure carousel background images behave well on mobile */
@media (max-width: 767.98px) {
  .carousel-item {
    /* Use cover on mobile so the hero image always fills the viewport */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    /* ensure a dark fallback if the image is delayed */
    background-color: #00002a !important;
  }
}

/* Desktop: show second carousel image scaled down so it appears framed */
@media (min-width: 992px) {
  .carousel-inner .carousel-item:nth-child(2) {
    /* match other slides: cover the carousel so slide 2 fills the container */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #00002a !important;
  }
  /* ensure mask is not making the slide appear washed out */
  .carousel-inner .carousel-item .mask {
    background-color: rgba(0,0,0,0.36) !important;
  }
}

/* MOBILE-ONLY: improved section behaviour and touch scrolling */
@media (max-width: 767.98px) {
  html, body { height: auto; }
  /* keep main natural scrolling but enable smooth momentum */
  main {
    height: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* ensure only the intro/hero occupies the full viewport initially on mobile */
  #intro, #introCarousel, .home {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  /* allow other sections to size naturally so users can scroll freely through the page */
  main > section {
    min-height: auto !important;
    height: auto !important;
    display: block;
    padding: 18px !important;
  }

  /* ensure carousel occupies full screen on mobile (hero) */
  #introCarousel, .carousel-inner, .carousel-item { height: 100vh !important; }

  /* allow content inside a section to scroll if it's taller than the viewport */
  main > section .section-content,
  main > section .inner-scroll {
    max-height: none;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* reduce heavy continuous animations slightly on mobile for performance */
  .service-card::before,
  .skill-card::before,
  .icon-card::before {
    animation-duration: 2.0s !important;
    will-change: background-position, opacity, transform;
  }

  /* hint to GPU for smoother transforms */
  .service-card, .skill-card, .icon-card, .service-card::before, .skill-card::before, .icon-card::before {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  /* convert services table to a 2-column grid on small screens for better wrapping */
  /* MOBILE: stack services vertically, centered, one per row */
  .skills-table {
    display: grid !important;
    grid-template-columns: 1fr; /* single column stack */
    gap: 14px 0;
    justify-items: center; /* center each cell */
    border-spacing: 0; /* handled by grid gap */
    width: 100%;
    padding: 0 8px;
  }
  .skills-table tr { display: contents; }
  .skills-table td { display: block; }

  /* make skill-card adapt within the grid */
  .skill-card { min-height: 130px; padding: 12px; width: 100%; max-width: 480px; margin: 0 auto; box-sizing: border-box; }

  /* reduce non-essential transitions on mobile when user prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .service-card::before, .skill-card::before, .icon-card::before { animation: none !important; }
    .service-card, .skill-card, .icon-card { transition: none !important; }
  }
}
/* Carousel styling (copied from user-provided code) */
#introCarousel,
.carousel-inner,
.carousel-item,
.carousel-item.active {
  height: 100vh;
}

/* Page backgrounds: keep document root transparent so header/nav stays visible */
body {
  background: transparent;
}

/* Fluid typography and improved mobile spacing */
:root {
  --site-accent: #66c2ff;
  --site-cyan: #00f0ff;
}
html { font-size: clamp(14px, 1.6vw, 18px); }
main > section { padding: clamp(18px, 3.2vw, 48px); }
/* Ensure images and media scale responsively */
img, .carousel-bg { max-width: 100%; height: auto; }

/* Apply requested dark background to main content sections only (exclude header/navbar).
   Use !important so it overrides any inline styles on sections added earlier in the markup.
   Also set a readable text color and add a separator line between sections. */
main,
main > section {
  background-color: #00002a !important; /* darker blue section background */
  color: #ffffff; /* ensure text is legible on dark background */
}

/* Add a subtle separator between sections (not before the first section). */
main > section:not(:first-child) {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.carousel-item:nth-child(1) {
  /* Use local image to match the screenshot exactly. Place your file at: images/website-menu-08.jpg.avif */
  background-image: url('../images/website-menu-08.jpg.avif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.carousel-item:nth-child(2) {
  background-image: url('https://mdbootstrap.com/img/Photos/Others/images/77.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.carousel-item:nth-child(3) {
  background-image: url('https://mdbootstrap.com/img/Photos/Others/images/78.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Height for devices larger than 576px */
@media (min-width: 992px) {
  #introCarousel {
    margin-top: -58.59px;
  }
}

.navbar .nav-link {
  color: #fff !important;
}

/* Transparent navbar matching reference structure */
.transparent-nav {
  /* glass-style blurred navbar that shows a translucent, blurred version
     of the content behind it. Works on desktop and mobile. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background-color: rgba(255,255,255,0.04); /* subtle translucent layer */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* increase navbar vertical spacing to match screenshot */
.transparent-nav .container-fluid {
  padding-top: 22px;
  padding-bottom: 8px;
}

/* Brand styling */
.brand-text {
  /* keep class for structural styling but brand text removed */
  color: #fff !important;
}

/* brand logo in navbar: larger per request */
.brand-logo {
  height: 96px; /* much larger as requested */
  width: auto;
  vertical-align: middle;
  margin-right: 12px;
  margin-left: 48px; /* move away from left edge */
  display: inline-block; /* allow transforms/animation */
}

/* Centered nav */
.center-nav {
  position: absolute;
  left: 50%;
  top: 16px; /* match screenshot vertical placement */
  transform: translateX(-50%);
  display: flex;
  gap: 1.2rem;
  list-style: none;
  align-items: center;
}

.center-nav .nav-link {
  color: rgba(255,255,255,0.95) !important;
  font-size: 12px;
  padding: 0.15rem 0.35rem;
  text-transform: none; /* keep normal case; screenshot has small caps-like look */
  opacity: 0.95;
}

.center-nav .nav-link {
  letter-spacing: 0.6px;
}

/* ---------- Nav underline + hover glow ---------- */
.center-nav .nav-link {
  position: relative; /* for the underline pseudo-element */
  transition: color 180ms ease, text-shadow 200ms ease, transform 160ms ease;
}

.center-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  bottom: -8px; /* space between text and underline */
  background: transparent;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), background 220ms linear;
  border-radius: 3px;
}

/* Purple underline on hover or when link is marked as current */
.center-nav .nav-link:hover::after,
.center-nav .nav-link.is-current::after {
  background: #66c2ff; /* lighter blue */
  transform: scaleX(1);
}

/* White glow when hovering over nav-link text */
.center-nav .nav-link:hover {
  text-shadow: 0 0 10px rgba(102,194,255,0.95);
  color: #ffffff !important;
}

/* Make sure the underline doesn't overlap on very small screens */
@media (max-width: 575.98px) {
  .center-nav .nav-link::after { bottom: -6px; height: 2.5px; }
}

/* CONTACT button was removed as requested; styles intentionally omitted */

/* Hover, active, and focus styles for nav links */
.center-nav .nav-link:hover,
.center-nav .nav-link:focus {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: none;
}

/* Ensure toggler icon is light colored on dark background */
.navbar-toggler {
  border: none;
  color: rgba(255,255,255,0.9);
}

/* Mobile collapse: make menu items stacked and visible */
@media (max-width: 991px) {
  .center-nav {
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    margin-top: 8px;
  }
  .btn-contact { margin-top: 8px; }
}

/* Hide carousel controls (arrows) on small screens as requested */
@media (max-width: 767.98px) {
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
}

/* Show phone number only on small screens; desktop shows icon only */
.nav-phone {
  display: none; /* hide text on desktop */
}

@media (max-width: 767.98px) {
  .nav-phone {
    display: inline; /* show phone text on mobile */
    margin-left: 6px;
    font-size: 14px;
    color: #fff;
  }
  .social-right .nav-link { color: #fff !important; }
}

/* make dropdown links small and light */
.dropdown-menu {
  min-width: 140px;
}

/* Make sure carousel text is readable on all devices */
.carousel .mask .text-white h1,
.carousel .mask .text-white h2,
.carousel .mask .text-white h5 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Small responsiveness tweaks */
@media (max-width: 991px) {
  .d-none.d-lg-block {
    display: block !important;
  }
  /* Keep navbar fixed on mobile so it stays visible while scrolling. */
  .transparent-nav {
    position: fixed; /* user requested fixed mobile navbar */
    top: 0;
    left: 0;
    right: 0;
    /* keep the same glass look on mobile; if you'd prefer a stronger tint on small screens,
       we can increase the background alpha here. */
    background-color: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
  }
  .center-nav {
    position: static;
    transform: none;
    justify-content: center;
    padding-top: 8px;
    gap: 0.9rem;
  }
  .brand-text { padding-left: 16px; }
}

/* Mobile specific optimizations */
@media (max-width: 767.98px) {
  /* reduce hero height on small phones */
  #introCarousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item.active {
    height: 60vh;
    min-height: 420px;
  }

  /* make nav more compact */
  .brand-text { padding-left: 12px; letter-spacing: 3px; font-size: 16px; }
  .transparent-nav .container-fluid { padding-top: 10px; padding-bottom: 6px; }
  .center-nav .nav-link { font-size: 14px; padding: 6px 8px; }

  /* style the expanded collapse to look like a dropdown overlay */
  .navbar-collapse {
    background: rgba(0,0,0,0.75);
    position: absolute;
    /* ensure collapse appears below the taller navbar/logo on mobile */
    top: 120px;
    left: 0;
    right: 0;
    padding: 12px 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    z-index: 2500;
    /* prepare for slide animation */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 320ms cubic-bezier(.2,.8,.2,1), opacity 280ms ease, transform 280ms ease;
  }

  .navbar-collapse .center-nav {
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }

  /* When collapse is open, expand with slide/fade */
  .navbar-collapse.show {
    max-height: 520px; /* large enough to contain menu items */
    opacity: 1;
    transform: translateY(0);
  }

  /* keep the toggler above the collapse overlay so it's always clickable/visible */
  .navbar-toggler {
    z-index: 2800;
  }

  /* reduce carousel text sizes */
  .carousel .mask .text-white h1 { font-size: 22px; }
  .carousel .mask .text-white h5 { font-size: 14px; }

  /* Hide social icons on mobile only (desktop keeps them visible) */
  .social-right {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* tablets */
  #introCarousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item.active {
    height: 75vh;
  }
  .brand-text { padding-left: 18px; }
}

/* ---------- Desktop animated icons (sizes + hover animation) ---------- */
/* Recommendation: use 22px for secondary icons and 24px for primary (phone) on desktop. */
@media (min-width: 992px) {
  /* base icon sizing for desktop */
  .social-right .nav-link i {
    font-size: 22px; /* email / linkedin */
    line-height: 1;
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), color 180ms ease;
    display: inline-block; /* allow transform */
    color: rgba(255,255,255,0.95);
  }

  /* Icon images for desktop: use 48x48 assets (SVGs preferred) */
  .social-right .nav-link img.social-gif,
  .social-right .nav-link img.social-icon {
    width: 48px;
    height: 48px;
    display: inline-block;
    object-fit: contain;
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), filter 180ms ease;
  }

  /* make phone icon slightly larger to draw attention */
  .social-right a[href^="tel:"] i {
    font-size: 24px;
  }

  /* subtle hover animation (lift + small wobble) for icons or GIFs */
  .social-right .nav-link:hover i,
  .social-right .nav-link:hover img.social-gif,
  .social-right .nav-link:hover img.social-icon {
    transform: translateY(-3px) scale(1.06);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
    animation: navIconWiggle 700ms ease;
  }

  @keyframes navIconWiggle {
    0% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-4px) rotate(-6deg); }
    60% { transform: translateY(-2px) rotate(4deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }

  /* optional focus state for keyboard users */
  .social-right .nav-link:focus i,
  .social-right .nav-link:focus img.social-gif,
  .social-right .nav-link:focus img.social-icon {
    transform: translateY(-2px) scale(1.03);
    outline: 2px solid rgba(255,255,255,0.12);
    outline-offset: 2px;
  }
}

/* Desktop: enlarge and polish Contact icon cards (use same levitate as .brand-logo) */
@media (min-width: 500px) {
  .contact-icons {
    display: flex !important;
    gap: 36px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .contact-card {
    width: 160px !important;
    height: 160px !important;
    border-radius: 16px !important;
    padding: 12px !important;
    background: linear-gradient(180deg, rgba(6,24,56,0.92) 0%, rgba(2,12,32,0.96) 100%);
    box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 6px 22px rgba(0,160,220,0.08);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, filter 260ms ease;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  .contact-card .contact-icon {
    font-size: 48px !important;
    color: #ffffff !important;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
    animation: logo-levitate 3s ease-in-out infinite alternate;
    will-change: transform;
  }

  .contact-card .contact-label {
    margin-top: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #eaf6ff !important;
    text-align: center !important;
  }

  .contact-card:hover,
  .contact-card:focus {
    transform: translateY(-10px) scale(1.04) !important;
    box-shadow: 0 36px 84px rgba(0,0,0,0.6), 0 30px 120px rgba(0,160,220,0.12) !important;
    z-index: 4000 !important;
  }

  /* Slightly increase spacing for the section heading so the big cards fit nicely */
  #contact.section-anim > h2 { margin-top: 6vh !important; margin-bottom: 1.2rem !important; }
}

/* Desktop-only adjustments for center nav: larger links and slightly lower position */
@media (min-width: 992px) {
  .center-nav .nav-link {
    font-size: 15px; /* larger on desktop */
    padding: 0.35rem 0.6rem;
    font-weight: 700; /* make center nav links bold on desktop */
  }

  /* move the centered nav further lower to sit better with the larger logo */
  .center-nav {
    top: 78px; /* lowered further on desktop to sit beneath the larger logo */
  }

  /* Enlarge brand logo significantly on desktop only */
  .brand-logo {
    height: 160px; /* significantly larger for desktop */
    margin-left: 64px;
    /* subtle levitate animation */
    animation: logo-levitate 3s ease-in-out infinite alternate;
    will-change: transform;
    transform: translateZ(0); /* promote to its own layer for smoother animation */
  }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .brand-logo { animation: none !important; }
  }
}

/* Make all main > sections full-screen at tablet+ so About behavior applies to every section.
   This sets each content section to 100vh (viewport height) starting at 768px and up.
   Keep smaller devices with natural content height to avoid scroll usability issues. */
@media (min-width: 768px) {
  main > section {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    box-sizing: border-box;
  }
}

/* Desktop-only: make Our Services skill-cards semi-transparent (glass-like) similar to the navbar */
@media (min-width: 992px) {
  .skill-card {
    background-color: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 10px 36px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.02);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, border-color 260ms ease;
  }

  /* slightly reduce the inner backdrop intensity so the glass effect reads as translucent */
  .skill-card::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.28)) !important;
  }

  /* ensure hover still gives a clear lift on desktop */
  .skill-card:hover {
    transform: translateY(-12px) scale(1.025);
    box-shadow: 0 28px 84px rgba(0,0,0,0.54), 0 8px 30px rgba(102,194,255,0.06);
    border-color: rgba(102,194,255,0.14);
  }
}

/* ensure long content inside a full-screen section can still scroll internally on small viewports */
main > section .inner-scroll {
  max-height: 100%;
  overflow: auto;
}

/* Layout: heading at top area; section-content centered below heading */
.section-anim {
  display: flex;
  flex-direction: column;
}

.section-anim > h2 {
  align-self: center;
  margin: 10vh 0 2vh; /* push heading down from top for visual separation */
  font-size: 2rem;
}

.section-anim .section-content {
  flex: 1 1 auto; /* take remaining space */
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center; /* center horizontally */
  text-align: center;
  width: 100%;
}

.section-anim .section-content > div {
  max-width: 900px; /* keep paragraphs readable */
  padding: 0 16px;
}

@media (max-width: 767.98px) {
  .section-anim > h2 { margin: 2rem 0 1rem; }
  .section-anim .section-content { padding: 0 12px; }
}

/* animation/visibility helpers applied to sections */
.section-anim {
  /* initial hidden state: slide slightly up and fade out */
  transform: translateY(18px);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease;
  will-change: transform, opacity;
}

.section-anim.in-view {
  transform: translateY(0);
  opacity: 1;
}

.section-anim.out-view {
  /* slide out upward and fade */
  transform: translateY(-18px);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 360ms ease;
}

/* ensure that when navigating via anchor the transition is visible (smooth scroll does the rest) */
.section-anim:target {
  /* if the section becomes :target via anchor, ensure it's shown */
  transform: translateY(0);
  opacity: 1;
}

/* subtle levitate keyframes for brand logo (up/down) */
@keyframes logo-levitate {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* pause levitation on hover to reduce motion while interacting */
@media (min-width: 992px) {
  .brand-logo:hover { animation-play-state: paused; }
}

/* === Mobile: hide contact section and navbar contact for very small screens (<500px) === */
@media (max-width: 499px) {
  /* Remove the contact section entirely on mobile */
  #contact { display: none !important; }

  /* Hide the Contact center-nav link when viewport is small */
  .center-nav .nav-link[href="#contact"] { display: none !important; }

  /* Hide social icons in navbar (prevent contact from appearing in navbar) */
  .social-right { display: none !important; }
}

/* Ensure Our Values is visible even if animations/observer haven't toggled it yet */
#values.section-anim {
  opacity: 1 !important;
  transform: none !important;
}

/* Canvas particle background styles (desktop only) */
canvas#dots {
  position: absolute; /* placed inside header */
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20; /* sit above background images but below masks/content inside header */
  pointer-events: none; /* allow clicks through the canvas */
  display: none; /* hidden by default; shown on desktop via media query */
  opacity: 0.28; /* slightly stronger so it's visible */
}

/* Typing effect styles for hero (caret) */
.typed { font-weight: 800; }
.typed-caret {
  display: inline-block;
  margin-left: 6px;
  opacity: 1;
  color: var(--site-accent);
  animation: typedBlink 1s step-end infinite;
  transition: opacity 220ms ease;
}
@keyframes typedBlink { 50% { opacity: 0; } }

@media (min-width: 768px) {
  /* show particles on tablet+ as "desktop" to improve visibility for testing */
  canvas#dots { display: block; }
  /* ensure main content and masks sit above the canvas */
  header, main, footer { position: relative; }
  .transparent-nav { z-index: 99999 !important; position: fixed !important; top: 0; left: 0; right: 0; }
  /* make carousel masks and heading content render above the canvas */
  .carousel-item .mask { position: relative; z-index: 30 !important; }
  .carousel .mask .text-white { position: relative; z-index: 40 !important; }
}

/* Center the Our Values items and make the grid responsive */
#values .services-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 28px 20px;
  justify-items: center;
  align-items: start;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 6px;
}

@media (max-width: 767.98px) {
  #values .services-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
    max-width: 640px;
  }
}

@media (max-width: 480px) {
  #values .services-cards {
    grid-template-columns: 1fr;
    gap: 14px 0;
    max-width: 420px;
    padding-top: 0;
  }
}

/* Force Our Values into 3 columns x 2 rows on narrow mobile viewports (<=499px) */
@media (max-width: 499px) {
  /* Our Values: force 3 columns x 2 rows and compact sizing */
  #values .services-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px 8px !important;
    max-width: 360px !important;
    justify-items: center;
    align-items: start;
    padding-top: 6px !important;
  }

  /* Slightly reduce icon-card size within values so labels fit under each icon */
  #values .icon-card {
    width: 72px !important;
    height: 72px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }

  #values .choice-icon {
    font-size: 1.4rem !important;
  }

  #values .choice-label {
    font-size: 0.86rem !important;
    padding: 0 4px !important;
    line-height: 1.1 !important;
  }

  /* MOBILE ONLY: match Why Clients (services-2) item sizing to Our Values */
  #services-2 .icon-card {
    width: 72px !important;
    height: 72px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }

  #services-2 .choice-icon {
    font-size: 1.4rem !important;
  }

  #services-2 .choice-label {
    font-size: 0.86rem !important;
    padding: 0 4px !important;
    line-height: 1.1 !important;
  }

  /* keep services grid layout intact (2 columns on narrow screens) but ensure items size matches values */
  /* if you prefer services to also be 3 columns on tiny devices, tell me and I'll switch the grid rule here */
}

/* Book Meeting CTA styles */
.book-cta {
  display: inline-block;
  background: linear-gradient(90deg, var(--site-accent), var(--site-cyan));
  color: #001428;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,196,255,0.12);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, opacity 180ms ease;
  border: 1px solid rgba(255,255,255,0.06);
}
.book-cta:hover,
.book-cta:focus {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,166,230,0.16);
  text-decoration: none;
  opacity: 0.98;
}

@media (max-width: 767.98px) {
  .book-cta {
    display: block;
    width: calc(100% - 48px);
    max-width: 420px;
    margin: 12px auto 0 auto;
    padding: 16px 20px;
    font-size: 1.05rem;
    text-align: center;
    border-radius: 10px;
  }
}