@font-face {
  font-family: 'Mistral';
  src: url('../fonts/Mistral/MISTRAL.TTF');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* CSS HEX */
  --steel-pink: #cc00ccff;
  --ultra-pink: #ff70ffff;
  --ultra-pink-light: #ff70ff77;
  --licorice: #140014ff;
  --pale-purple: #ffeeffff;
  --risd-blue: #1f4bffff;
  --neon-blue: #476cffff;
  --neon-blue-light: #476cff77;
  --white: #ffffffff;
  --black: #000000ff;

  /* CSS HSL */
  --steel-pink: hsla(300, 100%, 40%, 1);
  --ultra-pink: hsla(300, 100%, 72%, 1);
  --licorice: hsla(300, 100%, 4%, 1);
  --pale-purple: hsla(300, 100%, 97%, 1);
  --risd-blue: hsla(228, 100%, 56%, 1);
  --neon-blue: hsla(228, 100%, 64%, 1);

  /* SCSS Gradient */
  --gradient-top: linear-gradient(0deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-right: linear-gradient(90deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-bottom: linear-gradient(180deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-left: linear-gradient(270deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-top-right: linear-gradient(45deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-bottom-right: linear-gradient(135deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-top-left: linear-gradient(225deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-bottom-left: linear-gradient(315deg, #cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-radial: radial-gradient(#cc00ccff, #ff70ffff, #140014ff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-header-text: linear-gradient(45deg, #cc00ccff, #ff70ffff, #ffeeffff, #cc00ccff, #1f4bffff, #476cffff);
  --gradient-card: linear-gradient(45deg, #ff70ff33, #ffeeff11, #cc00cc11);
  --gradient-line: linear-gradient(90deg, #cc00ccff, #ff70ffff, #ffeeffff, #1f4bffff, #476cffff);
  --gradient-nav-active: linear-gradient(45deg, #ff70ffff, #cc00ccff, #ff70ffff, #cc00ccff);
}

#dppl-logo-text {
  font-family: 'Mistral', regular;
}

@media (max-width: 768px) {
  #dppl-logo-text {
    font-size: 1rem;
  }
}

.grades {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.cta-button.grade-btn {
  padding: 10px 20px;
  font-size: 0.8rem;
}

.granules-img {
  display: block;
  width: 164%;
  position: relative;
  left: -60%;
  top: -180%;
}

.feature-content.applications {
  padding: 10px;
}

@media (max-width: 560px) {
    .granules-img {
        /* top: -100%; */
        /* left: -50%; */
    }

  .grades {
    justify-content: center;
  }
}



/* Scoped styles for the carousel component */
.carousel-container-wrapper {
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; */
  /* padding: 2rem 1rem; */
  /* Provides spacing if placed against other elements */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Carousel Container & Glassmorphism Effect --- */
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
  /* This is crucial for the sliding effect */
  border-radius: 1rem;

  /* The Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* For Safari */
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.15);
}

/* --- Track and Slides --- */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-slide img {
  width: 100%;
  display: block;
  object-fit: cover;
  /* Set a consistent aspect ratio to prevent layout shifts */
  aspect-ratio: 16 / 9;
}

/* --- Navigation Buttons --- */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: background-color 0.3s ease;
  display: none;
}

.carousel-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}

/* --- Navigation Dots --- */
.carousel-nav {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background-color 0.3s ease;
}

.carousel-dot.active,
.carousel-dot:hover {
  background-color: #ffffff;
}