:root {
    --primary: #1eacc6;
    --secondary: #168a9f;
    --pop_yellow: #facc15;
}

/* 
  All basic styles like fonts, colors, and shadows are handled by the 
  Tailwind utility classes in your HTML file, so they are not needed here.
*/

/* Custom hover effect for feature card icons */
.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    color: var(--secondary);
}

html.dark .feature-card:hover .feature-icon {
    color: var(--pop_yellow);
}

.employer-logo-card { flex-shrink: 0; width: 140px; height: 80px; margin: 0 12px; }
html.dark .employer-logo-card {
    background-color: var(--dark_card_bg);
    border-color: var(--dark_border);
}

/* Custom hover effect for feature card titles */
.feature-card:hover h3 {
    color: var(--secondary);
}

html.dark .feature-card:hover h3 {
    color: var(--pop_yellow);
}
.how-it-works-card {
    background: var(--card_bg_light);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 4px solid transparent;
    text-align: center;
}

.how-it-works-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
/* Styles to hide the scrollbar on the auto-scrolling company logo section */
.featured-employers {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Hides the scrollbar across browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.featured-employers::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

@media (max-width: 1023px) {
    /* Smaller Featured Employers */
    .employer-logo-card { width: 110px; height: 65px; margin: 0 6px; }
}