@import url(https://fonts.googleapis.com/css2?family=Flavors&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Hanuman:wght@100;300;400;700;900&display=swap);
#siteHeader {
  display: flex;
  position: fixed;
  top: 0;
  height: 100px;
  width: 100vw;
  padding-top: 10px;
  padding-bottom: 10px;
  background: white;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.4s ease;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#siteHeader img {
  height: 95%;
  width: auto;
  margin-left: 3vw;
  z-index: 1000;
}
#siteHeader img:hover {
  cursor: pointer;
}
#siteHeader button {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fffcff;
  font-size: 30px;
  font-family: "Hanuman", serif;
  font-weight: 600;
  background-color: transparent;
  border: none;
  transition: font-size 0.4s ease, top 0.4s ease, color 0.4s ease;
}

#siteHeader.shrink {
  height: 60px;
  padding: 5px 10px;
}
#siteHeader.shrink button {
  top: 15px;
  font-size: 30px;
  color: #fc6107;
}

main {
  background-image: radial-gradient(circle, #fbb32d, #fc6107);
  display: flex;
  flex-direction: column;
  align-items: center;
}
main p, main dd {
  font-family: "Roboto Flex", sans-serif;
}
main dt, main h1, main h2, main h3, main button {
  font-family: "Hanuman", serif;
}
main #spacer {
  font-size: 0px;
}
main #intro {
  margin-top: calc(100px + 8vh);
  width: 90%;
  height: 75vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: space-around;
}
main #intro h1 {
  font-weight: 700;
  font-size: 8vw;
  line-height: 1.2em;
}
main #intro p {
  font-size: 4vw;
  position: relative;
  top: -20vw;
}
main #intro button {
  margin-top: 3vh;
  padding: 0.6em 0.8em;
  border-radius: 3vw;
  border: #030301 solid 0.2em;
  color: #fc6107;
  background-image: radial-gradient(#fffcff, #fffcff);
  font-family: "Hanuman", serif;
  cursor: pointer;
  box-shadow: #030301 5px 5px 0px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  top: -40vw;
}
main #intro button:hover {
  box-shadow: #030301 8px 15px 0px;
  transform: translateY(-4px);
}
main #imageBlendSection {
  display: inline;
  position: relative;
  width: 100vw;
  margin-top: 10vw;
  overflow: hidden;
}
main #imageBlendSection #blendSectionText {
  width: 100%;
  height: 150vw;
  padding: 1vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-around;
  color: #fffcff;
  background-color: #030301;
}
main #imageBlendSection #blendSectionText h2 {
  font-size: 6vw;
  font-weight: 600;
  justify-self: flex-start;
}
main #imageBlendSection #blendSectionText p {
  max-width: 90%;
  font-size: 3.75vw;
  line-height: 1.2em;
  font-weight: 100;
  z-index: 1000;
  text-shadow: #030301 1px 2px 2px;
  background-color: rgba(0, 0, 0, 0.501);
  padding: 1vw 2px;
  border-radius: 3vw;
}
main #imageBlendSection img {
  position: absolute;
  top: 15vw;
  height: 137vw;
  -webkit-mask-image: linear-gradient(325deg, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.5) 100%);
  mask-image: linear-gradient(325deg, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.5) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
main #services {
  min-height: 1000px;
  width: 100%;
  background: linear-gradient(to bottom, #fffcff 0%, #fffcff 20%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%, #fffcff 100%), url(images/docWindow-short.webp) no-repeat;
  background-size: cover;
  background-position: 0px center;
}
main #services ul {
  margin: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
main #services ul img {
  width: 5vw;
  height: auto;
  -webkit-mask-image: linear-gradient(300 deg, black 50%, transparent 100%);
  mask-image: linear-gradient(300deg, black 50%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
main #servicesDetailed {
  padding: 20px 0px;
  background-color: #fffcff;
  width: 100%;
}
main #servicesDetailed .gridLayout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px;
  margin: 10px;
}
main #servicesDetailed .gridLayout .pest:nth-child(1),
main #servicesDetailed .gridLayout .pest:nth-child(2) {
  grid-column: span 2;
}
main #servicesDetailed .pest {
  background-color: #8f8f8f;
  height: 20vw;
  margin: 10px;
  border-radius: 3vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
main #servicesDetailed .pest h3 {
  font-family: "Flavors", sans-serif;
  font-size: 4vw;
  color: #fffcff;
  text-shadow: #030301 0px 0px 10px;
  transform: translateY(4vw);
  transition: transform 0.4s ease;
}
main #servicesDetailed .pest p {
  opacity: 0;
  margin-top: 20px;
  width: 70%;
  font-size: 1.5vw;
  color: #fffcff;
  text-shadow: #030301 0 0 10px, #030301 0 0 10px;
  text-align: center;
  line-height: 1.2em;
  font-weight: 300;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(20px);
}
main #servicesDetailed .pest:hover h3 {
  transform: translateY(0);
}
main #servicesDetailed .pest:hover p {
  opacity: 1;
  transform: translateY(0);
}
main #servicesDetailed .pest.visible {
  opacity: 1;
  transform: translateY(0);
}
main #servicesDetailed #residential {
  background-image: url("./images/bugs/residential.webp");
  background-size: cover;
}
main #servicesDetailed #commercial {
  background-image: url("./images/bugs/commercial.webp");
  background-size: cover;
}
main #servicesDetailed #rodent {
  background-image: url("./images/bugs/rodent.webp");
  background-size: cover;
}
main #servicesDetailed #wasp {
  background-image: url(./images/bugs/wasp.webp);
  background-size: cover;
}
main #servicesDetailed #cockroach {
  background-image: url("./images/bugs/cockroach.webp");
  background-size: cover;
}
main #servicesDetailed #ant {
  background-image: url("./images/bugs/ant.webp");
  background-size: cover;
}
main #servicesDetailed #scorpion {
  background-image: url("./images/bugs/scorpion.webp");
  background-size: cover;
}
main #servicesDetailed #silverfish {
  background-image: url("./images/bugs/silverfish.webp");
  background-size: cover;
}
main #servicesDetailed #spider {
  background-image: url("./images/bugs/spider.webp");
  background-size: cover;
}
main #servicesDetailed #mosquito {
  background-image: url("./images/bugs/mosquito.webp");
  background-size: cover;
}
main #contactUs {
  width: 100%;
  padding-bottom: 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fffcff;
}
main #contactUs h2 {
  margin: 10vh;
  font-size: 3vw;
  font-weight: 600;
}
main #contactUs #mapWithText {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
main #contactUs #mapWithText img {
  width: 40%;
  border-radius: 3vw;
  box-shadow: rgba(0, 0, 0, 0.411) 3px 5px 10px;
}
main #contactUs #mapWithText div {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
main #contactUs #mapWithText div h3 {
  font-size: 2.2vw;
}
main #contactUs #mapWithText div p {
  font-size: 1.5vw;
}
main #contactUs #mapWithText div button {
  padding: 0.6em 0.8em;
  border-radius: 3vw;
  border: #030301 solid 0.2em;
  color: #fffcff;
  background-image: radial-gradient(#fc6107, #fc6107);
  font-family: "Hanuman", serif;
  cursor: pointer;
  box-shadow: #030301 5px 5px 0px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  font-size: 1.5vw;
  font-weight: 600;
}
main #contactUs #mapWithText div button:hover {
  box-shadow: #030301 8px 15px 0px;
  transform: translateY(-4px);
}
main #faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2vh;
}
main #faq h2 {
  font-size: 3vw;
  font-weight: 600;
  margin-top: 1.2em;
}
main #faq dl {
  display: flex;
  flex-direction: column;
  width: 50vw;
  padding: 40px;
  margin: 40px 0px;
  background-image: radial-gradient(#fbb32d, #fc6107);
  border-radius: 3vw;
  box-shadow: rgba(0, 0, 0, 0.411) 3px 5px 10px;
}
main #faq dl dt {
  margin-left: 5%;
  margin-bottom: 10px;
  font-size: 1.5vw;
  font-weight: 600;
  font-style: italic;
}
main #faq dl dd {
  margin: 0px 10%;
  font-size: 1.2vw;
}
main #faq dl .faqBreak {
  height: 5px;
  border-radius: 3vw;
  background-color: #030301;
  margin: 30px 0px;
  width: 5vw;
  align-self: center;
  transition: width 1s ease;
}
main #faq dl > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
main #faq dl > *.visible {
  opacity: 1;
  transform: translateY(0);
}
main #faq .faqBreak.visible {
  width: 100%;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}
footer p {
  font-family: Arial, Helvetica, sans-serif;
}
footer p span {
  font-weight: bold;
}

/*# sourceMappingURL=mobile.css.map */