/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Account for fixed navbar height */
body {
  padding-top: 72px; /* ~ navbar height */
  font-family: Arial, Helvetica, sans-serif;
}

/* Sections */
.section-full {
  min-height: 50vh;
}
.section-pad {
  padding: 80px 0;
}

section {
  scroll-margin-top: 80px; /* 👈 same or slightly larger than your navbar height */
}


/* Hero with particles only in Home */
.hero-section {
  position: relative;
  background: #8a0e50; /* fallback color behind canvas */
  color: #fff;
  min-height: 80vh;       /* adjust height here */
  display: flex;
  align-items: center;    /* vertical centering */
  justify-content: center;
}

#heroCarousel .carousel-item {
  padding: 100px 20px;    /* spacing inside slides */
}

.particles-layer {
  position: absolute;
  inset: 0;         /* top/right/bottom/left: 0 */
  z-index: 0;       /* behind content */
  pointer-events: auto; /* allow particles hover/click */
}
.hero-content {
  position: relative;
  z-index: 1;       /* above particles */
  padding-top: 2rem;
  padding-bottom: 2rem;
}


/* Keep a stable height so it doesn't reflow mid-fade */
#home .carousel,
#home .carousel-inner,
#home .carousel-item {
  height: 30vh;            /* or a fixed px height you prefer */
 min-height: 300px;       /* optional safety */
}
#home .carousel-item > .slide-body {
  height: 100%;            /* center content vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional polish */
.card { border: 0; box-shadow: 0 10px 24px rgba(0,0,0,.06); }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #fff;
  border-radius: .75rem;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}


.icon-primary  { background-color: #8a0e50; }
.icon-secondary    { background-color: #C53683; }
.icon-accent  { background-color: #C53683; }






/* Clients Section Slider */
.slider {
  background: #e0e0e0;
  height: 120px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 120px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slide-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

.slide {
  height: 120px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide img {
  height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 6));
  }
}

#clients {
  background-color: #e0e0e0;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, #e0e0e0 0%, rgba(245, 245, 245, 0) 100%);
}


.contact-skyline {
  display: block;
  height: 420px;          /* 👈 fixed skyline height */
  width: auto;            /* 👈 keep aspect ratio */
  max-width: 100%;        /* 👈 responsive */
  margin-top: 0;       /* space below text */
  margin-bottom: 0;
}

#contact {
  padding-bottom: 0 !important;  /* 👈 removes extra space below image */
}


#contact a {
  color: #C53683;
  text-decoration: none;
}

#contact a:hover {
  color: #a62d6e;
  text-decoration: underline;
}