/* Responsive styles for mobile devices */
@media (max-width: 768px) {
  body {
    margin: auto; /* Center the paragraph */
    margin-top: -6rem;
  }

  img {
    width: 15rem; /* Reduce the logo size for mobile */
    margin-bottom: -7rem;
  }

  h1 {
    font-size: 1em; /* Adjust font size for smaller screens */
    text-align: center;
    margin: auto; /* Center the paragraph */
    margin-top: 3rem; /* Adjust margin for smaller screens */
  }

  h2 {
    font-size: 1em; /* Adjust font size for smaller screens */
    margin-top: -2rem;
    margin-bottom: 3rem;
    margin: auto; /* Center the paragraph */
    margin-top: 1rem;
  }

  p {
    font-size: 0.7em; /* Adjust paragraph font size */
    margin: auto; /* Center the paragraph */
    padding: 1rem;
  }

  .card {
    flex-wrap: wrap; /* Allow social icons to wrap on smaller screens */
    gap: 15px; /* Adjust spacing between icons */
    margin: auto; /* Center the paragraph */
  }

  .socialContainer {
    width: 40px; /* Reduce size of social icons */
    height: 40px;
  }

  .socialSvg {
    width: 14px; /* Adjust icon size */
  }

  .image-man {
    margin-top: -4.5rem;
  }
}

/* Responsive styles for tablet devices */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    margin: auto;
    margin-top: 1rem;
  }

  img {
    width: 20rem; /* Adjust logo size for tablets */
    margin-top: 4rem;
    margin-bottom: -6rem;
  }

  h1 {
    font-size: 2.3em; /* Adjust font size for tablets */
    text-align: center;
    margin: auto;
    margin-top: 2rem;
  }

  h2 {
    font-size: 1.5em; /* Adjust font size for tablets */
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  p {
    font-size: 0.9em; /* Adjust paragraph font size */
    margin: auto;
    padding: 1rem;
    text-align: center;
    width: 80%;
  }

  .card {
    flex-wrap: wrap; /* Allow social icons to wrap if needed */
    gap: 20px; /* Adjust spacing between icons */
    margin: auto;
  }

  .socialContainer {
    width: 50px; /* Adjust size of social icons */
    height: 50px;
  }

  .socialSvg {
    width: 16px; /* Adjust icon size */
  }
}
