body {
            font-size: 16px;
        }


        .main-page-container {
            position: relative;
            display: flex;
            width: 100%;
            min-height: 100vh;
            flex-direction: column;
            background-color: #fff;
            overflow-x: hidden;
            /* If you need group/design-root styles, add them here */
        }

        .flex-center {
            display: flex;
            align-items: center;
            gap: 1rem;         /* gap-4 */
            color: #111418;
        }

        .name-heading {
            color: #111418;
            font-size: 22px;
            font-weight: bold;
            line-height: 1.25;         /* leading-tight */
            letter-spacing: -0.015em;  /* tracking-[-0.015em] */
            text-align: center;
        }

        .subtitle-text {
            color: #60758a;
            font-size: 1rem;        /* text-base */
            font-weight: 400;       /* font-normal */
            line-height: 1.5;    /* leading-normal */
            text-align: center;
        }

        .paragraph-text {
            color: #111418;
            font-size: 1rem;
            /* base */
            font-weight: 400;
            /* normal */
            line-height: 1.5;
            /* 1.5 spacing */
            padding-bottom: 0.75rem;
            /* pb-3 */
            padding-top: 0.25rem;
            /* pt-1 */
            padding-left: 1rem;
            /* px-4 */
            padding-right: 1rem;
            /* px-4 */
            text-align: justify;
            /* justify the text */
        }

        .header-2 {
            color: #111418;
            font-size: 22px;
            font-weight: bold;
            line-height: 1.25;         /* leading-tight */
            letter-spacing: -0.015em;  /* tracking-[-0.015em] */
            padding-left: 1rem;        /* px-4 */
            padding-right: 1rem;       /* px-4 */
            padding-bottom: 0.75rem;   /* pb-3 */
            padding-top: 1.25rem;      /* pt-5 */
        }

        .image-intro-container {
            padding-left: 10rem;
            /* px-40 */
            padding-right: 10rem;
            /* px-40 */
            display: flex;
            flex: 1 1 0%;
            justify-content: center;
            padding-top: 1.25rem;
            /* py-5 */
            padding-bottom: 1.25rem;
            /* py-5 */
        }

        .bottom-buttons,
        .header-buttons {
            color: #111418;
            font-size: 0.875rem;
            /* text-sm */
            font-weight: 500;
            /* font-medium */
            line-height: normal;
            /* leading-normal */
        }

        .hamburger-button {
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 480px;
            min-width: 0;
            height: 2.5rem;                /* h-10 */
            gap: 0.5rem;                   /* gap-2 */
            padding-left: 0.625rem;        /* px-2.5 */
            padding-right: 0.625rem;       /* px-2.5 */
            overflow: hidden;
            border-radius: 0.5rem;         /* rounded-lg */
            background-color: #f0f2f5;
            color: #111418;
            font-size: 0.875rem;           /* text-sm */
            font-weight: bold;
            line-height: normal;
            letter-spacing: 0.015em;
            cursor: pointer;
            border: none;
        }

        .header-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            border-bottom: 1px solid #f0f2f5;
            border-style: solid;
            padding-left: 2.5rem;   /* px-10 */
            padding-right: 2.5rem;  /* px-10 */
            padding-top: 0.75rem;   /* py-3 */
            padding-bottom: 0.75rem;/* py-3 */
        }


        .header-nav {
            display: none;
        }

        .header-menu-button {
            display: block;
        }

        .mobile-dropdown-menu {
            display: none;
        }

        .intro-layout-content-container {
            display: flex;
            flex-direction: column;
            max-width: 960px;
            flex: 1 1 0%;
        }

        .menu-link {
            display: block;
            padding: 1rem;                /* p-4 */
            color: #111418;
            font-size: 1.125rem;          /* text-lg */
            font-weight: bold;
            line-height: 1.25;            /* leading-tight */
            letter-spacing: -0.015em;     /* tracking-[-0.015em] */
            border-bottom: 1px solid #f0f2f5;
            border-style: solid;
        }

        .download-resume-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f2f5;
            color: #111418;
            font-size: 0.875rem;        /* text-sm */
            font-weight: bold;
            line-height: normal;
            letter-spacing: 0.015em;
            padding-left: 1rem;         /* px-4 */
            padding-right: 1rem;        /* px-4 */
            padding-top: 0.5rem;        /* py-2 */
            padding-bottom: 0.5rem;     /* py-2 */
            border-radius: 0.5rem;      /* rounded-lg */
        }

        .flex-row-start {
            display: flex;
            justify-content: flex-start;
        }

        .contact-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;           /* gap-2 */
            background-color: #fff;
            padding-top: 0.625rem; /* py-2.5 */
            padding-bottom: 0.625rem;
            text-align: center;
            width: 5rem;           /* w-20 */
        }

        .contact-icons {
            border-radius: 9999px;      /* rounded-full */
            background-color: #f0f2f5;  /* bg-[#f0f2f5] */
            padding: 0.625rem;          /* p-2.5 */
        }

        /* Styles for screens smaller than 769px (mobile) */
        @media (max-width: 768px) {

            .header-links,
            .header-profile {
                display: none;
            }

            .hamburger-button {
                display: block;
            }

            .who-i-am-heading {
                text-align: center;
            }

            .main-content-padding {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .mobile-dropdown-menu.active {
                display: block;
            }

            .header-buttons {
                display: none;
            }
        }

        /* Styles for screens larger than 768px (desktop) */
        @media (min-width: 769px) {

            .header-links,
            .header-profile {
                display: flex;
            }

            .hamburger-button {
                display: none;
            }
        }