:root {

  --primary: #199FB1;

  --primary-filtered: brightness(0) saturate(100%) invert(41%) sepia(80%) saturate(413%) hue-rotate(139deg) brightness(108%) contrast(100%);

  --primary-dark: #0D5C75;

  --primary-dark-filtered: brightness(0) saturate(100%) invert(28%) sepia(10%) saturate(6608%) hue-rotate(159deg) brightness(92%) contrast(90%);

  --primary-soft: #f0f9fa;

  --dark: #0F172A;

  --slate: #64748B;

}


.afacad-title {
  font-family: "Afacad", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-size: 34px !important;
}

.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 46px !important;
}




body {

  font-family: 'Plus Jakarta Sans', sans-serif;

  background-color: #f8fafc;

  color: var(--dark);

  overflow-x: hidden;

}


/* Slider Styles */

.slider-wrapper {
  overflow: hidden;
  padding: 40px 0;
  position: relative;

}



.slider-track {
  display: flex;

  /* Extra smooth transition timing */
  transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: transform;
}



.v2-item {
  /* Always 4 items per row */
  flex: 0 0 25%;
  /* Always 5 items per row */
  flex: 0 0 20%;
  /* Always 6 items per row */
  /* flex: 0 0 17%; */
  padding: 0 15px;
  transition: all 0.5s ease;
  box-sizing: border-box;
}



/* @media (max-width: 1400px) {

  .v2-item {
    flex: 0 0 25%;
  }

} */

@media (max-width: 992px) {

  .v2-item {
    flex: 0 0 50%;
  }

}



@media (max-width: 576px) {

  .v2-item {
    flex: 0 0 100%;
  }

}



/* Organic Blob Styles */

.v2-container {

  text-align: center;
  perspective: 1000px;

}



.v2-blob {

  width: 140px;
  height: 140px;
  background: var(--primary-soft);
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid rgba(25, 159, 177, 0.05);
}



.v2-blob IMG {
  transition: transform 0.5s ease, color 0.5s ease;
  font-weight: 300;
  height: 75px;
}



/* Initial Alternating Icon Colors */

.v2-item:nth-child(odd) .v2-blob {
  color: var(--primary-dark);
}

.v2-item:nth-child(even) .v2-blob {
  color: var(--primary);
}

.v2-item:nth-child(odd) .v2-blob IMG{
  filter: var(--primary-dark-filtered);
}

.v2-item:nth-child(even) .v2-blob IMG{
  filter: var(--primary-filtered);
}



/* Active/Sequenced States */

.v2-item.active-pulse-primary .v2-blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: var(--primary);
  color: white !important;
  transform: scale(1.1);
  box-shadow: 0 20px 40px rgba(25, 159, 177, 0.3);
}

.v2-item.active-pulse-secondary .v2-blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: var(--primary-dark);
  color: white !important;
  transform: scale(1.1);
  box-shadow: 0 20px 40px rgba(13, 92, 117, 0.3);
}

.v2-item.active-pulse-primary .v2-blob IMG{
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(103%);
}

.v2-item.active-pulse-secondary .v2-blob IMG{
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(103%);
}

.v2-item.active-pulse-primary h6 {
  color: var(--primary);
}

.v2-item.active-pulse-secondary h6 {
  color: var(--primary-dark);
}

.v2-item h6 {
  font-weight: 700;
  font-size: 0.95rem;
  color: #6f6f6f  ;
  transition: color 0.3s ease;
}

/* Controls */
.slider-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.dot {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  width: 24px;
  border-radius: 10px;
  background: var(--primary);
}