html, body, a {
  height: 100%; /* Ensures the html and body take full viewport height */
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: 'Arial', sans-serif; /* Clean, readable font */
  color: #6f7376 !important;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
  text-align: center;
}
a:hover{
  color: #FEA78A !important;
}

.logo {
  max-width: 27%; /* Smaller logo for smaller screens */
  height: auto;
  margin-bottom: 20px; /* Space below logo */
}

.content h1, .content p {
  margin: 0 15px; /* Margin for small screens */
}

.content h1 {
  font-size: 2vw; /* Responsive font size based on viewport width */
 
}

.content p {
  max-width: 700px; /* Wider paragraph for a balanced look */
  font-size: 18px; /* Larger font size for better readability */
  padding: 20px; /* Adds padding around the text */
  background-color: #f8f9fa; /* Light background for the text block */
  border-radius: 10px; /* Rounded corners for the text block */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

@media (max-width: 668px) {
  .logo {
      max-width: 60%; /* Increase logo size slightly on smaller devices */
      margin-top: -5% !important;
  }

  .container h1, .content h1{
      font-size: 5vw !important;
      width: 75%;
  }

  .container p, .content p {
      font-size: 4vw;
      width: 75%;
  }
}