/* CurvedLoop CSS */
.curved-loop-jacket {
  min-height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 1rem;
}

.curved-loop-svg {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  width: 100%;
  aspect-ratio: 100 / 12;
  overflow: visible;
  display: block;
  font-size: 6rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

/* Gradient fill for the text matching CTD branding */
.custom-curved-text {
  fill: url(#curved-text-gradient);
}

/* Add gradient definition via JavaScript or inline SVG */
.curved-loop-svg .main-text {
  fill: #db2c1a; /* Fallback color - CTD red */
}

/* Responsive font sizes and container height */
@media (max-width: 768px) {
  .curved-loop-jacket {
    min-height: 12vh;
    padding: 0 0.5rem;
  }
  
  .curved-loop-svg {
    font-size: 7rem;
    aspect-ratio: 100 / 12;
  }
}

@media (max-width: 480px) {
  .curved-loop-jacket {
    min-height: 10vh;
    padding: 0;
  }
  
  .curved-loop-svg {
    font-size: 6rem;
    aspect-ratio: 100 / 10;
  }
}