@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root {
    --emerald: 16 185 129;
}

body {
    font-family: 'Inter', system_ui, sans-serif;
}

.heading-font {
    font-family: 'Space Grotesk', sans-serif;
}

.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)),
        url('./images/bg_image.jpeg');
    background-size: cover;
    background-position: center;
}

.glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.nav-link {
    position: relative;
}

.nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: rgb(16 185 129);
    transition: all 0.3s ease;
}

.nav-link:hover:after {
    width: 100%;
}

.typing-container {
    display: inline-block;
    position: relative;
}

.typing-container:after {
    content: '|';
    animation: blink 0.8s infinite;
    color: rgb(16 185 129);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.project-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgb(16 185 129 / 0.25);
}

.timeline-dot {
    width: 14px;
    height: 14px;
    background: rgb(16 185 129);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);
}