@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

body {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

main {
  width: 100%;
  padding-top: 150px;
  padding-bottom: 80px;
}

@media screen and (max-width: 600px) {
  main {
    padding-top: 80px;
  }
}

.contact-main-heading-con {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-main-heading-con h1 {
  font-family: "Great Vibes", cursive;
  font-size: 50px;
}

.contact-info-img-con {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 200px;
}

.contact-img-con {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
}

.contact-img-con img {
  width: 500px;
  height: auto;
  border-radius: 50%;
}

.contact-info-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: baseline;
  width: 25%;
  flex-wrap: wrap;
}

.contact-info-con h4,
a {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  text-decoration: none;
  color: black;
}

/* For tablet devices (portrait and landscape) */
@media (max-width: 1024px) {
  .contact-main-heading-con h1 {
    font-size: 40px; /* Smaller font size for the heading */
  }

  .contact-info-img-con {
    gap: 100px; /* Reduce gap between elements */
  }

  .contact-img-con img {
    width: 300px; /* Smaller image on tablet devices */
  }

  .contact-info-con h4,
  .contact-info-con a {
    font-size: 18px; /* Slightly smaller font size */
  }
}

/* For mobile devices */
@media (max-width: 768px) {
  .contact-main-heading-con h1 {
    font-size: 30px; /* Even smaller font size for mobile */
  }

  .contact-info-img-con {
    flex-direction: column; /* Stack image and info on top of each other */
    gap: 50px; /* Adjust gap for mobile layout */
  }

  .contact-img-con,
  .contact-info-con {
    width: 90%; /* Full width with a little margin on the sides */
    align-items: center; /* Center align the content */
  }

  .contact-img-con img {
    width: 100%; /* Full width images */
    max-width: 260px; /* Maximum size */
    height: auto; /* Maintain aspect ratio */
  }

  .contact-info-con h4,
  .contact-info-con a {
    font-size: 16px; /* Smaller font size for mobile readability */
  }
}