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

        body {
          font-family: Quicksand, sans-serif;
          background-color: #ffffff;
          min-height: 100vh;
          overflow-x: hidden; /* Added overflow-x hidden to prevent horizontal scrolling issues */
        }

        h1 {
          color: #000;
          font-size: 2.25rem;
          font-weight: 100;
          line-height: 4rem;
        }

        h2 {
          color: #585858;
          font-size: 1.5rem;
          font-weight: 100;
          line-height: 1.75rem;
          padding-bottom: 1rem;
        }

        h3.project-category {
          color: #fff;
          font-size: 0.825rem;
          font-weight: 600;
          line-height: 1.25rem;
          text-transform: uppercase;
        }

        header {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 3rem;
            padding-bottom: 2rem;
        }

        .profile-image {
            width: 8rem;
            height: 8rem;
            border-radius: 50%;
            overflow: hidden;
            margin: 1rem 0 1.5rem 0;
        }

        .profile-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .name {
            font-size: 1.875rem;
            font-weight: 300;
            color: #000000;
            margin-bottom: 0.75rem;
        }

        .tagline {
            color: #979797;
            text-align: center;
            margin-bottom: 1rem;
            max-width: 28rem;
        }

        .experience {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: #979797;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .links {
            display: flex;
            gap: 1rem;
        }

        .links a {
            color: #AB5B00;
            font-size: 1rem;
            text-decoration: underline;
            font-weight: 800;
            transition: color 0.2s;
            padding-bottom: 3rem;
        }

        .links a:hover {
            color: #585858;
            text-decoration: underline;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            width: 100%; /* Removed explicit width and added width 100% for better responsive behavior */
            height: auto;
        }

        .project-card {
            position: relative;
            aspect-ratio: 1;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            min-height: 0;
            min-width: 0;
        }

        .project-card .badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background-color: rgba(255, 255, 255, 0.7);
            color: #000;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            text-transform: uppercase;
        }

        .project-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            text-align: left;
            width: 70%;
        }

        .project-category {
            font-size: 0.875rem;
            font-weight: 500;
            letter-spacing: 0.05em;
        }

        .project-description {
            font-size: 0.875rem;
            line-height: 1.6;
        }

        .project-link {
            color: #fdda00;
            font-size: 0.875rem;
            text-decoration: underline;
            font-weight: bold;
            display: block;
        }

        .project-link:hover {
            text-decoration: none;
        }

        /* Individual project backgrounds */
        .ux-analytics {
            background: linear-gradient(135deg, #005288 0%, #D7652C 100%);
        }

        .healthcare {
            background: linear-gradient(137.018deg, #6816AF 0%, #3A0469 100%);
        }

        .fintech {
            background: linear-gradient(137.018deg, #204029 0%, #316F17 100%);
        }

        .employee-benefits {
            background: linear-gradient(140.307deg, #6F1A11 12%, #3656DC 100%);
        }

        .ecommerce {
            background: linear-gradient(-153.782deg, #DC4731 0%, #922E27 100%);
        }

        .onboarding {
            background: linear-gradient(156.154deg, #001D32 0%, #02286C 81%);
        }

        .content-management {
            background: linear-gradient(-135.138deg, #6E7784 0%, #2F425C 100%);
        }

        .edtech {
            background: linear-gradient(135deg, #003A51 0%, #008BB1 100%);
        }

        .service-design {
            background: linear-gradient(-50.215deg, #D74E2B 0%, #6F2300 100%);
        }

        /* Responsive design */
        @media (max-width: 639px) {

            h2 {
                text-align:center;
                font-size: 1.2rem;
                padding: 0 4rem 1rem 4rem;
            }
        }
        @media (min-width: 640px) {

            h2 {
                text-align:center;
                font-size: 1.25rem !important;
                padding: 0 0.5rem 1rem 0.5rem;
            }

            .experience {
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

            .experience span:not(:last-child)::after {
                content: "•";
                margin: 0 0.5rem;
            }
        }

        @media (min-width: 768px) {

            h2 {
                text-align:center;
                font-size: 1.5rem !important;
                padding: 0 0.5rem 1rem 0.5rem;
            }
            .portfolio-grid {
                grid-template-columns: repeat(2, 1fr);
                /* Removed width: 100vw to prevent horizontal scrolling */
            }

            .service-design {
                grid-column: span 2;
                aspect-ratio: 2/1;
            }
        }

        @media (min-width: 1024px) {
            .portfolio-grid {
                grid-template-columns: repeat(3, 1fr);
                /* Removed width: 100vw to prevent horizontal scrolling */
            }

            .project-content {
                max-width: 250px;
            }

            /* Reset service-design to single column on large screens to prevent gaps */
            .service-design {
                grid-column: span 1;
                aspect-ratio: 1;
            }
        }