body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

html {
  font-size: 62.5%;
}

/* Global Classes  */

.Flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Wrapper {
  width: 100%;
  max-width: 85%;
  margin: 0 auto;
  padding: 1.5rem;
}

.secHeading {
  font-size: 3rem;
  color: #2d8ad9;
  text-align: center;
  text-transform: uppercase;
}
/* Global Classes  */

/* Contact Us Styling Starts */
.contact {
  margin-bottom: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 600px 105px;
  background-image: url('https://couponsdesk.com/admin/uploads/Contact%20Illustration.svg');
}
.contact p {
  line-height: 1.5;
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 30px;
}
.contactForm {
  flex: 1;
  width: 430px;
  padding: 30px;
  display: flex;
  border-radius: 5px;
  flex-direction: column;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.grid {
  gap: 30px;
  display: grid;
  margin-bottom: 30px;
  grid-template-columns: repeat(1, 1fr);
}

.searchForm {
  outline: none;
}

.searchForm,
.textarea {
  /* width: 100%; */
  border: none;
  color: #757575;
  font-size: 1.6rem;
  border-radius: 5px;
  padding: 15px 10px;
  background-color: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.textarea {
  outline: none;
  margin-bottom: 30px;
  font-family: "Nunito", sans-serif;
}

.submitButton {
  border: none;
  width: 100px;
  margin: 0 auto;
  display: block;
  color: white;
  font-weight: 700;
  background: none;
  font-size: 1.6rem;
  text-align: center;
  padding: 12px 20px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all linear 0.2s;
  background: rgb(140, 56, 181);
  background: linear-gradient(
    90deg,
    rgba(140, 56, 181, 1) 0%,
    rgba(45, 138, 217, 1) 100%
  );
}
.submitButton:hover {
  border-radius: 10px;
}

/* Media Query Starts */

/* For screens less than or equal to 991px */
@media (max-width: 1024px) {
  .contact {
    background-image: none;
  }
  .contactForm {
    width: 95%;
    flex: 1;
  }
}

/* For screens less than or equal to 880px */
@media (max-width: 880px) {
  /* Styles for 880px */
}

/* For screens less than or equal to 720px */
@media (max-width: 720px) {
  /* Styles for 720px */
}

/* For screens less than or equal to 640px */
@media (max-width: 640px) {
  .contact .secHeading {
    font-size: 2rem;
  }
  .contactForm {
    width: 90%;
  }
  .contact p {
    font-size: 1.4rem;
  }
}

/* For screens less than or equal to 560px */
@media (max-width: 560px) {
  .contactForm {
    width: 80%;
  }
  .submitButton {
    flex: 1;
    width: 90%;
  }
}

/* For screens less than or equal to 480px */
@media (max-width: 480px) {
  .contact .secHeading {
    font-size: 1.8rem;
  }
  .submitButton {
    width: 85%;
  }
  .contact p {
    font-size: 1.2rem;
  }
}

/* For screens less than or equal to 320px */
@media (max-width: 320px) {
  /* Styles for 320px */
}

/* Media Query Ends */
