/* Replace the green accent color with Lirosoft's secondary color */
:root {
  --branding-primary-color: #10afeb;    /* Lirosoft primary logo color */
  --branding-secondary-color: #53e3fd;  /* Lirosoft secondary color */
}

/* Use these variables to replace all instances of the previous green accent color */
.button-primary {
  background-color: var(--primary-color);
}

.accent-color, 
.section-heading span,
.feature-icon,
.nav-link:hover,
.active-link {
  color: var(--primary-color);
}

.button-secondary:hover,
.testimonial-card:hover,
.service-card:hover {
  border-color: var(--secondary-color);
  box-shadow: 0 5px 15px rgba(83, 227, 253, 0.2); /* Using secondary color for shadow */
}

/* Add gradient effects using both colors */
.gradient-bg {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* Update hover states to use the secondary color */
.button-primary:hover {
  background-color: var(--secondary-color);
}

/* Load the custom font */
@font-face {
  font-family: '1234Font';
  src: url('../fonts/1234FontRegular-Xyjj.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply the custom font to the span */
.logo-font {
  font-family: '1234Font', sans-serif; /* Fallback to sans-serif if the font fails to load */
  font-size: 2.1em; /* Adjust font size as needed */
  color: inherit; /* Inherit color from parent */
  text-transform: lowercase;
}

/* Add a trailing hair space before the .logo-font span */
.logo-font::before {
  content: '\200A';
}

/* Add a trailing hair space after the .logo-font span */
.logo-font::after {
  content: '\200A';
}

/* Applies a grayscale filter  */
.grayscale {
  filter: grayscale(100%);
}

/* Scale responsively without wrapping, and shrink on smaller viewports */
shrink-text {
  font-size: clamp(1rem, 5vw, 2em); /* Scales with viewport */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

footer {
  font-size: medium; 
  text-align: end;
  font-style: normal;
}