body {
    font-family: 'Inter', sans-serif;
    background-color: #111827;
    /* A dark blue-gray background */
    color: #E5E7EB;
    /* Light gray text for contrast */
}

/* Style for the active navigation link */
.nav-link-active {
    color: #3B82F6;
    /* A bright blue for the active link */
    font-weight: 600;
}

/* Custom gradient for hero section */
.hero-gradient {
    background: radial-gradient(ellipse at top, rgba(59, 130, 246, 0.15), transparent 60%);
}

/* Subtle glow effect for project cards on hover */
.project-card:hover {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.2);
    transform: translateY(-5px);
}

/* Styling for the resume section */
#resume img {
    max-width: none;
}

.resume-section .resume-item {
    border-left: 2px solid #374151;
    /* Gray border */
    padding-left: 1.5rem;
    margin-left: 0.5rem;
    position: relative;
}

.resume-section .resume-item::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.25rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    background-color: #3B82F6;
    /* Blue dot */
    border: 2px solid #111827;
}

.project-header-gradient {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.1), transparent 80%);
}

.header-gradient {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.1), transparent 80%);
}

.link-style {
    color: #60A5FA;
    /* Corresponds to text-blue-400 */
    text-decoration: underline;
    transition: color 0.2s;
}

.link-style:hover {
    color: #93C5FD;
    /* Corresponds to text-blue-300 */
}

/* Custom timeline styles */
.timeline-item {
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: 2rem;
    border-left: 2px solid #374151;
}

.timeline-item:last-child {
    border-left: 2px solid transparent;
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -0.55rem;
    top: 0.25rem;
    height: 1rem;
    width: 1rem;
    border-radius: 9999px;
    background-color: #3B82F6;
    border: 2px solid #111827;
}

#home {
    position: relative;
    /* Replace this URL with the path to your own background image */
    background-image: url('../images/home-page-background-abstract.png?ts=20250903');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* Creates a nice parallax effect */
}
/* For desktops: re-enable the fixed parallax effect */
@media (min-width: 1024px) {
    #home {
        background-attachment: fixed;
    }
}

#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* This gradient overlay ensures the text on top is readable */
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.7), rgba(17, 24, 39, 1));
    z-index: 1;
}

#home>.container {
    position: relative;
    z-index: 2;
    /* This keeps your text on top of the overlay */
}

#magic-line {
    transition: left 0.3s ease-out, width 0.3s ease-out;
}