body {
    font-family: 'Arial', sans-serif;
    }
  
  .welcome-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #C9DDCF;
    overflow: hidden;
  }
  
  .logo-container {
    animation: fadeInLogo 2s ease-out;
  }
  
  .logo {
    max-width: 800px;
    max-height: 700px;
  }
  
  .text-container {
    text-align: center;
    opacity: 0;
    animation: fadeInText 2s ease-out forwards 1s;
  }
  h1 {
    width: 500px;
    height: 100px;
    color: black;
    text-align: center;
    line-height: 50px; /* Center text vertically */
  }
  
  @keyframes fadeInLogo {
    from {
      opacity: 0;
      transform: translateY(-50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInText {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (max-width: 768px) {
    /* Adjust styles for smaller screens, e.g., phones */
    .welcome-container {
      height: 100vh;
    }
  
    .logo {
      max-width: 100%;
      max-height: 200px; /* Adjusted for better display on smaller screens */
    }
  
    h1 {
      width: 100%;
      font-size: 18px; /* Adjust font size for better readability on smaller screens */
    }
  }
  
  @keyframes fadeInLogo {
    from {
      opacity: 0;
      transform: translateY(-50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }