  /* ===========================================
           STEP 1: RESET & BASIC SETUP
           =========================================== */


    /* Remove default spacing from all elements */
    * {
        margin: 0;           /* Remove default margins */
        padding: 0;          /* Remove default padding */
        box-sizing: border-box; /* Include padding/border in element size */
    }

    /* Basic page setup */
    body {
        font-family: Arial, sans-serif;  /* Set font for entire page */
        background-color: #f5f5f5;       /* Light gray background */
        padding-top: 70px;               /* Space for fixed navbar */
    }

    /* ===========================================
       STEP 2: NAVBAR CONTAINER
       =========================================== */
    
    /* Main navigation bar */
    .navbar {
        background-color: #dc2626;  /* Red background */
        position: fixed;            /* Stick to top when scrolling */
        top: 0;                    /* Position at very top */
        width: 100%;               /* Full width of screen */
        z-index: 1000;             /* Stay above other content */
    }

    /* Inner container that holds logo and menu */
    .nav-container {
        display: flex;                    /* Use flexbox layout */
        justify-content: space-between;   /* Logo left, menu right */
        align-items: center;              /* Center items vertically */
        max-width: 1200px;                /* Don't get too wide */
        margin: 0 auto;                   /* Center on page */
        padding: 0 20px;                  /* Add space on sides */
        height: 70px;                     /* Fixed height */
    }

    /* ===========================================
       STEP 3: LOGO STYLING
       =========================================== */
    
    /* Portfolio logo/brand name */
    .logo {
        color: white;              /* White text */
        font-size: 24px;           /* Large text */
        font-weight: bold;         /* Make it bold */
        text-decoration: none;     /* Remove underline */
    }

    /* Logo hover effect */
    .logo:hover {
        color: #fecaca;            /* Light red when hovering */
    }

    /* ===========================================
       STEP 4: NAVIGATION MENU (DESKTOP)
       =========================================== */
    
    /* Container for navigation links */
    .nav-menu {
        display: flex;             /* Horizontal layout */
        list-style: none;          /* Remove bullet points */
        gap: 30px;                 /* Space between menu items */
    }

    /* Individual navigation links */
    .nav-link {
        color: white;                      /* White text */
        text-decoration: none;             /* Remove underline */
        padding: 10px 15px;                /* Space around text */
        border-radius: 4px;                /* Rounded corners */
        transition: all 0.3s ease;        /* Smooth hover effect */
        font-weight: 500;                  /* Medium bold */
    }

    /* What happens when you hover over a link */
    .nav-link:hover {
        background-color: white;           /* White background */
        color: #dc2626;                    /* Red text */
    }

    /* ===========================================
       STEP 5: HAMBURGER MENU BUTTON
       =========================================== */
    
    /* Hamburger button (3 lines) */
    .hamburger {
        display: none;             /* Hidden on desktop */
        flex-direction: column;    /* Stack lines vertically */
        cursor: pointer;           /* Show hand cursor */
        padding: 5px;              /* Small padding */
    }

    /* Each line of the hamburger */
    .hamburger span {
        width: 25px;               /* Line width */
        height: 3px;               /* Line thickness */
        background-color: white;   /* White color */
        margin: 3px 0;             /* Space between lines */
        transition: 0.3s;          /* Smooth animation */
    }

    /* ===========================================
       STEP 6: MOBILE RESPONSIVE DESIGN
       =========================================== */
    
    /* When screen is 768px or smaller (mobile/tablet) */
    @media screen and (max-width: 768px) {
        
        /* Show hamburger button on mobile */
        .hamburger {
            display: flex;         /* Make it visible */
        }

        /* Hide navigation menu by default on mobile */
        .nav-menu {
            display: none;         /* Hidden by default */
            position: absolute;    /* Position relative to navbar */
            top: 70px;             /* Below the navbar */
            left: 0;               /* Start from left edge */
            width: 100%;           /* Full width */
            background-color: #dc2626;  /* Same red background */
            flex-direction: column;      /* Stack vertically */
            padding: 20px 0;             /* Top and bottom padding */
            gap: 0;                      /* No gap between items */
        }

        /* Show menu when 'active' class is added by JavaScript */
        .nav-menu.active {
            display: flex;         /* Make it visible */
        }

        /* Mobile menu items */
        .nav-item {
            text-align: center;    /* Center the text */
            padding: 10px 0;       /* Add vertical spacing */
        }

        /* Mobile navigation links */
        .nav-link {
            display: block;        /* Make links full width */
            padding: 15px;         /* Larger padding for touch */
            font-size: 16px;       /* Larger text for mobile */
        }
    }

    /* ===========================================
       STEP 7: DEMO CONTENT STYLING
       =========================================== */
    
    /* Demo content below navbar */
    .content {
        max-width: 1200px;        /* Match navbar width */
        margin: 0 auto;           /* Center content */
        padding: 40px 20px;       /* Add padding */
        text-align: center;       /* Center text */
    }

    .content h1 {
        color: #dc2626;           /* Red heading */
        margin-bottom: 20px;      /* Space below heading */
        font-size: 2.5rem;        /* Large heading */
    }

    .content p {
        color: #666;              /* Gray text */
        line-height: 1.6;         /* Better line spacing */
        font-size: 1.1rem;        /* Slightly larger text */
    }
    