/* Stub - CSS */

       * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --color-bg: #fafafa;
            --color-surface: #ffffff;
            --color-text: #1a1a1a;
            --color-text-muted: #6b6b6b;
            --color-border: #e5e5e5;
            --color-primary: #2e2e2e;
            --color-primary-hover: #1a1a1a;
            --color-success: #2d7a5f;
            --color-error: #c23030;
            --spacing-unit: 8px;
        }

        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--color-bg);
            color: var(--color-text);
            line-height: 1.6;
        }

        .header {
            padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
            border-bottom: 1px solid var(--color-border);
            background: var(--color-surface);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-text);
            text-decoration: none;
            letter-spacing: -0.02em;
        }

        .footer {
            border-top: 1px solid var(--color-border);
            padding: calc(var(--spacing-unit) * 4);
            text-align: center;
            color: var(--color-text-muted);
            font-size: 14px;
            margin-top: calc(var(--spacing-unit) * 10);
        }

/* Hamburger Button */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Hamburger Animation when Active */
.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Navigation Overlay */
.nav-mobile {
    display: none;
    position: fixed;
    top: 64px; /* Adjust based on your header height */
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 999;
    padding: 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.nav-mobile.active {
    transform: translateX(0);
}

.nav-mobile a {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 24px;
    border-bottom: 1px solid #e5e5e5;
    transition: background 0.2s;
}

.nav-mobile a:hover,
.nav-mobile a.active {
    background: #fafafa;
    color: #2e2e2e;
}

/* RESPONSIVE - Show on Mobile */
@media (max-width: 768px) {
    /* Show hamburger menu on mobile */
    .hamburger {
        display: flex;
    }
    
    /* Hide desktop nav on mobile */
    .nav {
        display: none;
    }
    /* Hide desktop nav on mobile */
    .nav a{
        display: none;
    }
    
    /* Show mobile nav */
    .nav-mobile {
        display: block;
    }
}

/* Pulse button */

/* Basic styling for the button */
.pulse-button {
    padding: 10px 15px;
    font-size: .8 em;
    color: white;
    background-color: #007BFF; /* A nice blue color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5); /* Initial shadow is invisible */
    -webkit-animation: pulse 2s infinite; /* For Safari/Chrome */
    animation: pulse 2s infinite; /* Apply the pulse animation */
  text-decoration: none;
}

/* Keyframes for the pulse effect */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(0, 123, 255, 0); /* The "pulse" part */
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

/* Optional: Add a hover effect */
.pulse-button:hover {
    background-color: #0056b3;
  text-decoration: none;
}