.hero-image {
  width: 50%;
  z-index: 99;
}

.intro-text {
  font-size: 24px;
  opacity: 0; /* Initially hidden */
}

#timer {
  font-size: 13px;
  letter-spacing: -1px;
}
#timer span {
  font-size: 20px;
  margin: 0 3px 0 15px;
}
#timer span:first-child {
  margin-left: 0;
}

.subtitle {
    font-size: smaller;
    color: #888; /* Adjust the color as desired */
}

.preferred-icons i {
  font-size: 50px;
  color: var(--accent-color);
}

.working-icons i {
  font-size: 50px;
  color: var(--secondary-color);
}

.used-icons i {
  font-size: 50px;
  color: var(--primary-color);
}

.typing-container h1 {
    min-height: 120px; /* Adjust this value based on the longest text */
    display: flex;
    align-items: center; /* This centers the text vertically */
    justify-content: center; /* This centers the text horizontally */
    overflow: hidden; /* Prevents text from overflowing the container */
}



@media (max-width: 767.98px) { /* Adjust for small devices */
    .preferred-icons i,
    .working-icons i,
    .used-icons i {
        margin-bottom: 10px; /* Add some space between stacked icons */
    }
}

@media (max-width: 991.98px) {
    body {
        padding-top: 56px; /* Adjust this value based on the height of your navbar */
    }
}

i, .tool-buttons {
    z-index: 10;
}