.overlay-text {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  font-size: 38px; /* Standard size for large screens */
  color: #ffffff;
  line-height: 1.2; /* Standard line height */
  z-index: 10; /* Ensure it's above other elements */
}

.overlay-text p {
  background-color: rgba(139, 0, 0, 0.5);
  padding: 5px 10px; /* Adding some padding */
  margin: 4px 0; /* Adjust spacing between paragraphs */
  z-index: 10; /* Ensure it's above other elements */
}

/* Responsive design for tablets */
@media (max-width: 768px) {
  .overlay-text {
    font-size: 28px; /* Smaller text for smaller devices */
    left: 20px; /* Less padding on the sides */
  }
}

/* Responsive design for mobile phones */
@media (max-width: 480px) {
  .overlay-text {
    font-size: 20px !important; /* Smaller text for mobile phones, important to override other styles */
    left: 10px; /* Less padding on the sides */
    line-height: 1.1 !important; /* Smaller line height for mobile phones, important to override other styles */
  }
}

/* Further responsive design for very small screens or high DPI screens */
@media (max-width: 320px) {
  .overlay-text {
    font-size: 16px !important; /* Even smaller text for very small screens, important to override other styles */
    line-height: 1 !important; /* Reduced line height for very small screens, important to override other styles */
  }
}