/*//RESET*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  touch-action: pan-y;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
a,
button,
textarea {
  font: inherit;
}

/*/
/RESET*/
/*/ABOVE NAVBAR*/
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white; /* to prevent see-through background */
}

.div-of-items-above-main-nav {
  background-color: rgb(3, 71, 3);
  display: flex;
  color: white;
  padding: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.div-of-number-and-location-above-navbar {
  display: flex;
  margin-left: auto;
  gap: 2rem;
}
.div-of-number-and-location-above-navbar,
.PestKell-Logo-on-top-of-nav-bar {
  font-size: 1.2rem;
}
.div-of-number-and-location-above-navbar a {
  text-decoration: none;
  color: white;
}
/*/ABOVE NAVBAR*/
/*/NAVBAR*/
.overall-div-of-navbar {
  display: flex;
  padding: 0.7rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.div-of-button-on-navbar {
  margin-left: auto;
}
.div-of-button-on-navbar button {
  padding: 0.4rem;
  background-color: white;
  border: 1px solid rgb(3, 71, 3);
  color: rgb(3, 71, 3);
  border-radius: 15px;
  font-size: 1.1rem;
}
.div-of-navbar-links ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  font-size: 1.3rem;
}
.div-of-navbar-links a {
  text-decoration: none;
  color: black;
}
/*/NAVBAR*/
/*/HOMEPAGE*/
#homepage {
  background: linear-gradient(
      to right,
      rgba(3, 10, 3, 0.658),
      rgba(0, 100, 0, 0.4)
    ),
    url(hero-image-for-pestkell-2.jpg);
  height: 80vh;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 0.7rem;
  margin-bottom: 7rem;
}

.herto-text-for-home-page {
  position: absolute;
  top: 15%;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.main-ero-text-for-homepage {
  font-size: 4rem;
  width: 70%;
  color: white;
  font-weight: 600;
}
.secondary-herp-text-for-homepage {
  color: rgb(207, 207, 207);
  width: 50%;
  font-size: 1.1rem;
}
.hero-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.get-free-quote-hero-button button {
  padding: 0.5rem;
  border-radius: 15px;
  background-color: rgb(4, 100, 4);
  border: none;
  color: white;
  font-weight: 600;
  width: 150px;
}
.telephone-number-hero-button button {
  padding: 0.5rem;
  border-radius: 15px;
  border: none;
  font-weight: 600;
  color: white;
  border: 1px solid white;
  background-color: transparent;
  width: 150px;
}
.telephone-number-hero-button a {
  text-decoration: none;
  color: white;
}
.hero-box-with-services {
  background-color: white;
  border-radius: 10px;
  width: 800px;
  height: 170px;
  margin: 0 auto;

  position: absolute;
  top: 80%;
  left: 20%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
}
.hero-box-with-services {
  display: flex;
  gap: 2rem;
  padding: 0.5rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.div-of-individual-sections-of-the-hero-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.div-of-individual-sections-of-the-hero-box i {
  font-size: 2.8rem;
  color: rgb(3, 71, 3);
  margin-top: 0.7rem;
}
.main-text-of-hero-box {
  font-size: 1.3rem;
  font-weight: bolder;
  margin-top: 0.5rem;
}
.secondary-text-on-hero-box {
  text-align: center;
  color: rgb(80, 80, 80);
  font-weight: 600;
  margin-top: 0.5rem;
}
.vertical-ruler-on-hero-box {
  background-color: rgb(3, 71, 3);
  height: 150px;
  width: 1px;
}
/*/HOMEPAGE*/
/*/COMAPNIES USED*/
#Companies-used {
  background-color: rgb(247, 247, 247);
}
.overall-div-of-companies-used {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  gap: 1rem;
  margin-bottom: 2rem;
}
.heading-for-companies-used-section {
  font-size: 1.7rem;
  font-weight: bold;
}
.div-of-first-set-of-comapnies,
.div-of-second-set-of-companies {
  display: flex;
  gap: 2rem;
  font-size: 1.5rem;
  color: rgb(83, 83, 83);
}
.futurewave-company {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.mindscope-company {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.novotech-company {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
/*/COMAPNIES USED*/
/* ABOUT OUR STORY */
.Overall-div-for-about_our_story-article {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.7rem;
  gap: 2rem;
  flex-wrap: nowrap;
  margin-left: 2rem;
}

.text-in-about-our-story-article {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ✅ FIXED */
}

.about-our-story-heading p {
  font-size: 2.5rem;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 600;
  width: 80%;
}

.secondary-text-about-our-story {
  font-size: 1.2rem;
  width: 90%;
  margin-top: 1rem;
}

.first-buttons-in-text-section-of-about-our-story-article {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.free-quote-button-in-about-our {
  padding: 0.5rem;
  border-radius: 15px;
  background-color: rgb(7, 131, 7);
  border: none;
  color: white;
  font-weight: 600;
  width: 170px;
}

.telephone-number-button-in-about-our {
  padding: 0.5rem;
  border-radius: 15px;
  border: 1px solid rgb(7, 131, 7);
  font-weight: 600;
  background-color: transparent;
  width: 150px;
}

.telephone-number-button-in-about-our a {
  text-decoration: none;
  color: rgb(7, 131, 7);
}

.second-set-of-buttons-alone {
  display: flex;
  gap: 2rem;
  margin-top: 4rem;
}

.second-set-of-buttons-and-js-text-in-about-our-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.div-for-js-text-for-mission_and_vision {
  width: 100%;
}

.our-mission-button,
.our-vission-button {
  width: 270px;
  border: 1px solid rgb(7, 131, 7);
  border-radius: 15px;
  padding: 0.5rem;
  background-color: transparent;
}

.our-mission-button:hover,
.our-vission-button:hover {
  cursor: pointer;
  background-color: rgb(132, 209, 132);
  transition: all 0.3s ease;
}
.arrow-up-button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background-color: rgb(7, 131, 7);
  color: white;
  padding: 0.2rem;
  font-size: 1.5rem;
  margin-top: 0.2rem;
  margin-left: -0.6rem;
}
.arrow-up-button:hover {
  transform: scale(1.1);
}

.image-in-about-our-story-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  position: relative;
}

.image-in-about-our-story-section img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}

#mission_and_vision_text {
  font-size: 1.2rem;
  padding: 0.7rem;
  max-width: 100%;
  word-wrap: break-word;
  transition: all 0.3s ease;
}
.overall-google-rating-div-in-about-our-story {
  position: absolute;
  top: 80%;
  right: 50%;
  background-color: rgba(150, 150, 150, 0.13);
  padding: 0.4rem;
}
.div-for-google-rating-stars i {
  color: gold;
}
.div-for-google-rating-text {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-weight: 600;
}
.vertical-ruler-on-google-rating {
  background-color: white;
  height: 20px;
  width: 1px;
}
/* ABOUT OUR STORY */
/*GOT QUESTIONS?*/
#Got_Questions {
  padding: 1.5rem; /* more breathing room */
  background-color: #f9f9f9; /* optional */
  padding-left: 9rem;
}

.overall-div-for-got-questions-article {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.div-for-image-in-got-questions-article img {
  border-radius: 10px;
  transform: skew(7deg);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  height: auto;
  display: block;
}

.questions-div-on-got-questions-article {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.why-choose-us {
  text-decoration: underline;
  color: rgb(7, 131, 7);
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 600;
}

.main-heading-for-got-questions p {
  font-size: 2.5rem;
  font-weight: 600;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  width: 70%;
}

.div-questions-in-got-question-article {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  width: 50%;
}

.actual-questions-in-got-questions-article {
  border-bottom: 1px solid gray;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.questions-heading {
  font-size: 1.2rem;
  font-weight: 600;
}
/*GOT QUESTIONS?*/
/*TIPS AND INSIGHTS*/
#tips_and_insights {
  padding: 1.5rem;
  margin-top: 3rem;
}
.overall-div-for-tips-and-insights-article {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.headings-for-tips-and-insights-article {
  display: flex;
}
.eexplore-text-on-tips-page {
  margin-left: auto;
  width: 40%;
  margin-top: 0.7rem;
}
.div-of-tips-and-insights-cards {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.left-tips-heading p {
  font-size: 2.8rem;
  font-weight: 600;
  width: 70%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
.eexplore-text-on-tips-page button {
  padding: 0.3rem;
  width: 160px;
  border-radius: 15px;
  border: 1px solid rgb(7, 131, 7);
  background-color: transparent;
  color: rgb(7, 131, 7);
  margin-top: 0.4rem;
}
.eexplore-text-on-tips-page button:hover {
  cursor: pointer;
  background-color: rgb(174, 247, 174);
  transition: al 0.3s ease;
}
.individual-card-in-tips-and-insights img {
  border-radius: 10px;
}
.text-in-tips-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: sans-serif;
}
.text-in-tips-card p {
  margin-top: 0.2rem;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  width: 90%;
}
.read-article-under-tips-cards {
  color: rgb(7, 131, 7);
  margin-top: 0.3rem;
  font-weight: 700;
  font-size: 1.2rem;
}
/*TIPS AND INSIGHTS*/
/*CONTACT FORM*/
#contact {
  padding: 1.5rem;
}
.overall-div-for-contact-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: green;
  padding: 4rem;
  border-radius: 10px;
  margin: 0 auto;
  width: 1000px;
}
.heading-for-contact-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.contact-us-heading-alone p {
  color: white;
  font-size: 3rem;
  font-weight: 700;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  text-align: center;
}
.secondary-hedaing-for-caontact-page p {
  width: 70%;
  text-align: center;
  margin: 0 auto;
  color: white;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.div-for-second-part-of-contact-section {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.image-on-contact-page {
  position: relative;
}
.image-on-contact-page img {
  border-radius: 10px;
  width: 450px;
  height: 408px;
}

.box-on-image-in-contact-section {
  position: absolute;
  top: 67%;
  left: 7%;
  background-color: white;
  border-radius: 10px;
  padding: 1.4rem;
  width: 390px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.left-text-in-box-on-image-on-contact-page p {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
.button-on-box-in-contact-page-image button {
  padding: 0.2rem;
  background: transparent;
  border: 1px solid green;
  color: green;
  width: 180px;
  border-radius: 15px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: white;
  padding: 1rem;
  border-radius: 10px;
  width: 350px;
}
input,
textarea {
  padding: 0.5rem;
  border-radius: 15px;
  border: 1px solid rgb(238, 238, 238);
  background-color: rgb(238, 238, 238);
}
input:focus,
textarea:focus {
  border: 1px solid green;
  outline: 1px solid green;
}
.paragraph_under-inputs {
  color: rgb(59, 59, 59);
}
.terms-of-service {
  text-decoration: underline;
  color: green;
}
.contact-form-button {
  align-self: flex-start;
  padding: 0.5rem;
  border-radius: 15px;
  margin-top: 0.3rem;
  background-color: green;
  color: white;
  border: none;
}
/*CONTACT FORM*/

/* Mobile devices (up to 767px) */
@media screen and (max-width: 767px) {
  /* ABOVE NAVBAR */
  .div-of-items-above-main-nav {
    padding: 0.5rem;
    gap: 1.4rem;
  }
  .div-of-number-and-location-above-navbar {
    gap: 0.5rem;
    margin-left: 0;
    text-align: center;
  }

  .div-of-number-and-location-above-navbar {
    font-size: 1rem;
  }
  .PestKell-Logo-on-top-of-nav-bar {
    font-size: 1.2rem;
  }
  /* NAVBAR */
  .overall-div-of-navbar {
    align-items: center;
    padding: 0.5rem;
  }
  .div-of-navbar-links ul {
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
  }
  .div-of-button-on-navbar {
    display: none;
  }

  /* HOMEPAGE */
  #homepage {
    height: 60vh;
    padding: 0.5rem;
  }
  .herto-text-for-home-page {
    top: 25%;
    text-align: center;
  }
  .main-ero-text-for-homepage {
    font-size: 2.5rem;
    width: 90%;
  }
  .secondary-herp-text-for-homepage {
    font-size: 0.9rem;
    width: 80%;
    margin: 0 auto;
  }
  .hero-buttons {
    justify-content: center;
    gap: 0.8rem;
  }
  .get-free-quote-hero-button button,
  .telephone-number-hero-button button {
    width: 140px;
    font-size: 0.9rem;
    padding: 0.4rem;
  }
  .hero-box-with-services {
    width: 240px;
    height: 630px;
    margin: 0 auto;

    position: absolute;
    top: 80%;
    left: 20%;
    flex-direction: column;
  }
  .vertical-ruler-on-hero-box {
    height: 1px;
    width: 230px;
  }
  .overall-div-of-companies-used {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .div-of-first-set-of-comapnies,
  .div-of-second-set-of-companies {
    flex-wrap: wrap;
    margin-left: 3rem;
  }
  #Companies-used {
    margin-top: 38rem;
  }
  .Overall-div-for-about_our_story-article {
    flex-direction: column-reverse;
    align-items: center;
    padding: 0.5rem;
    gap: 1rem;
    margin-left: 0;
  }

  .text-in-about-our-story-article {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .about-our-story-heading p {
    font-size: 1.8rem;
    width: 100%;
  }

  .secondary-text-about-our-story {
    font-size: 1rem;
    width: 100%;
  }

  .first-buttons-in-text-section-of-about-our-story-article {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .free-quote-button-in-about-our,
  .telephone-number-button-in-about-our {
    width: 100%;
    max-width: 300px;
  }

  .second-set-of-buttons-alone {
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
  }

  .our-mission-button,
  .our-vission-button {
    width: 100%;
    max-width: 300px;
  }

  .arrow-up-button {
    margin-left: 0;
  }

  .image-in-about-our-story-section {
    width: 100%;
  }

  .image-in-about-our-story-section img {
    width: 100%;
    height: auto;
  }

  #mission_and_vision_text {
    font-size: 1rem;
    padding: 0.5rem;
  }
  #Got_Questions {
    padding: 1.5rem;

    padding-left: 0rem;
  }
  .div-questions-in-got-question-article {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 0.4rem;
  }
  .main-heading-for-got-questions p {
    width: 100%;
    text-align: center;
  }
  .overall-google-rating-div-in-about-our-story {
    top: 70%;
    right: 35%;
  }
  .headings-for-tips-and-insights-article {
    flex-direction: column;
  }
  .eexplore-text-on-tips-page {
    margin-left: 0;
    width: 100%;
  }
  .left-tips-heading p {
    width: 100%;
  }
  .div-of-tips-and-insights-cards {
    flex-direction: column;
  }
  .overall-div-for-contact-section {
    padding: 0.8rem;
    width: 100%;
  }
  .box-on-image-in-contact-section {
    width: 90%;
  }
  .left-text-in-box-on-image-on-contact-page p {
    font-size: 1rem;
  }
  .button-on-box-in-contact-page-image button {
    width: 120px;
  }
}

/* Tablet devices (768px to 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* HOMEPAGE */
  #homepage {
    height: 70vh;
  }
  .herto-text-for-home-page {
    top: 25%;
  }
  .main-ero-text-for-homepage {
    font-size: 3rem;
    width: 80%;
  }
  .secondary-herp-text-for-homepage {
    font-size: 1rem;
    width: 60%;
  }
  .hero-buttons {
    gap: 0.8rem;
  }
  .get-free-quote-hero-button button,
  .telephone-number-hero-button button {
    width: 140px;
    font-size: 1rem;
  }
  .hero-box-with-services {
    left: 3%;
    width: 730px;
  }
  .div-questions-in-got-question-article {
    width: 90%;
  }
  .main-heading-for-got-questions p {
    width: 100%;
  }
  .overall-google-rating-div-in-about-our-story {
    top: 70%;
    right: 40%;
  }
  .overall-div-for-contact-section {
    width: 750px;
  }
  .image-on-contact-page img {
    width: 500px;
  }
  .image-on-contact-page {
    margin: 0 auto;
  }
  .contact-form {
    margin: 0 auto;
  }
}