My site:https://mark-valentino.vercel.app/
My Repo:https://github.com/M-Valentino/M-Valentino_NextJS
The subheading class should make the font size a little bit large on desktop browsers but it doesn't. I've attached screenshots of what appears deployed and what appears on localhost.

@media only screen and (min-width:429px) {
  .linkCopied {
    font-size: 14px;
  }

  .subHeading {
    font-size: 34px;
  }
}

@media only screen and (max-width:428px) {
  .linkCopied {
    font-size: 11px;
  }

  .subHeading {
    font-size: 24px;
  }
}

component for the subheading:

import React from "react";
import { Typography } from "@mui/material";
import { SHADOWS } from "@/consts/stylingValues";

export const MainHeading = ({ children, shrinkFontOn, addMarginBottomOn }) => {
  return (
    <Typography
      variant={shrinkFontOn ? "h4" : "h3"}
      fontWeight={600}
      textAlign={"center"}
      style={{
        textShadow: SHADOWS.small,
        marginBottom: !addMarginBottomOn ? 0 : 20,
      }}
    >
      {children}
    </Typography>
  );
};

export const SubHeading = ({ children }) => {
  return (
    <Typography
      className="subHeading"
      color="text.primary"
      style={{
        marginBottom: 15,
        textShadow: SHADOWS.minute,
        fontWeight: "bolder",
        textAlign: "center",
      }}
    >
      {children}
    </Typography>
  );
};

I've tried clearing my cache too.