.p1 {
   text-align:left;
   font-size: 20px;
   color:red;
   }



.p2 {
  text-align: center;
  color: white; 
  font-size: 40px;
  margin: 0;
  padding: 20px; /* Optional padding so text doesn't touch the screen edges */
}

/* This creates a fixed layer beneath your text */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Pushes the image behind the text layer */
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('balaji.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  will-change: transform; /* Optimizes mobile scrolling performance */
}