.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 */
}
.tool-icons img {
    width: 35px;
    height: 35px;
    margin: 5px;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease-in-out;
}

.tool-icons img {
    width: 50px;
    height: 50px;
    margin: 5px;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Default icon color (Primary Color) */
.tool-icons img {
    filter: invert(50%) sepia(60%) saturate(200%) hue-rotate(140deg);
}

/* Hover effect (Accent Color) */
.tool-icons img:hover {
    transform: scale(1.05);
    filter: invert(80%) sepia(80%) saturate(200%) hue-rotate(140deg);
}

.tool-icons svg {
    width: 35px;
    height: 35px;
    margin: 5px;
    fill: var(--primary-color); /* Uses CSS variable for color */ 1A4957FF 71C7B3FF 2A899AFF
    transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out;
}

.tool-icons svg:hover {
    transform: scale(1.1);
    fill: var(--accent-color);
}

.tool-icons img {
   color: var(--secondary-color);
}

.tool-icons img {
    color: var(--accent-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 your navbar */
    }
}

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

.tech-icon {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(50%);
}

.tech-icon:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}