@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');

#vanta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff; /* Adjust for visibility */
  font-size: 5rem; /* Adjust size as needed */
  text-align: center;
  font-family: 'Gruppo', cursive; /* Choose an appropriate font */
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* Stronger shadow for depth */
  opacity: 0.6; /* Adjust for blending effect */
  transition: opacity 0.3s ease-in-out;
}

.minimalist-button {
  background-color: black;
  /* border: 0.5px solid white; */
  color: #E1E1E1;
  font-size: 16px;
  margin: 15px;
  padding: 10px 25px;
  font-family: 'Gruppo', cursive; /* Choose an appropriate font */
  transition: all 0.6s ease; 
}

.minimalist-button:hover {
  color: black;
  background-color: #ffffff;
  cursor: pointer; /* Change cursor to indicate it's clickable */
  transform: scale(1.2); /* Slightly enlarge the button on hover */
  /* Keep the original color and background */

}

.slogan {
  font-size: 1.5rem; /* Adjust the size as needed */
  color: #FFF; /* Adjust the color as needed */
  margin: 1px 0; /* Adjust spacing around slogan */
  /* You can add more styles as needed */
}

/* Optional: Add interaction effect */
.text-overlay:hover {
    opacity: 2;
}

/* Media Query for smartphones */
@media screen and (max-width: 1200px) { 
  .text-overlay {
    font-size: 7rem; /* Adjust text size for smaller screens */
    padding: 50px; /* Reduced padding */
    width: 100%; /* Set width to full viewport width */
    box-sizing: border-box; /* Include padding in the width calculation */
    opacity: 1; /* Adjust for blending effect */
  }
  .slogan {
    font-size: 3rem; /* Adjust slogan text size for smaller screens */
  }

  .minimalist-button {
    font-size: 40px; /* Increase font size for buttons */
    margin: 20px;
    padding: 15px 30px; /* Increase padding for a larger button */
  }
}