/* Home Section */
.home {
  height: 100vh; /* Full viewport height */
  background-color: #333;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Stack elements vertically */
  text-align: center;
  padding: 20px;
}

.home .intro {
  max-width: 100%; /* Ensure content doesn’t stretch too far */
  margin-bottom: 20px; /* Add some space between text and button */
}

.home h1 {
  font-size: 3rem; /* Make the title bigger */
  margin-bottom: 11px;
}

.home p {
  font-size: 1.2rem; /* Adjust text size for readability */
  margin-bottom: 20px;
}

.home .cta {
  background-color: #f39c12;
  color: white;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.1rem; /* Make the button text slightly bigger */
  font-weight: bold;
  margin-top: 20px; /* Add some spacing from the paragraph above */
  transition: background-color 0.3s ease;
}

.home .cta:hover {
  background-color: #e67e22; /* Slightly darker on hover */
}

.about .about-content {
  padding: 12px 0px 12px 0px;
  background-color: #8a8b8a;
}

.about .about-content .about-text{
  padding: 30px 0px 0px 30px;
}

.image-container {
  width: 300px;          /* Width of the image-container */
  display: flex;        /* Center content horizontally and vertically */
  justify-content: center;
  align-items: center;
}

 /* Make the image scale relative to the image-container */
 .profile-img {
   max-width: 100%;      /* Ensure the image doesn't overflow the container */
   height: auto;         /* Maintain aspect ratio */
}

/* Optional: Adding more space and spacing adjustments for smaller screens */
@media (max-width: 768px) {
  .home h1 {
    font-size: 2.5rem;
  }

  .home p {
    font-size: 1rem;
  }

  .home .cta {
    padding: 10px 20px;
  }
}