@font-face {
  font-family: "NHD";
  src: url("./Fonts/NeueHaasDisplayMediumItalic.ttf");
}
@font-face {
  font-family: "Manrope";
  src: url("./Fonts/Manrope.ttf");
}
:root {
  --h1size: 3.75rem;
  --h2size: 2rem;
  --h3size: 1.3rem;
  --h4size: 1.1rem;
  --psize: 1.3rem;
  --headerHeight: 4.5rem;
  --contentPadding: 7rem;
  --minPadding: 5rem;
  --textContainerMax: 900px;
  --helloContentPosition: 21rem;
  --chunkPaddingTopBot: 6rem;
  --logoContainerHeight: 5rem;
  --logoContainerMargin: 8rem;
  --customerLogoWidth: 20rem;
  --serviceCardPadding: 2.5rem;
  --largePicMargin: 2rem;
  --largePicFlex: 1.5;
  --commonPageHeaderHeight: 475px;
  --businessh1Size: 6vw;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Manrope, sans-serif;
  color: #18191b;
  box-sizing: border-box;
  font-size: 13px;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
* a {
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}

h1 {
  font-size: var(--h1size);
  margin-bottom: 1.75rem;
  color: hsl(168, 64%, 24%);
}

h2 {
  font-size: var(--h2size);
  font-weight: regular;
}

h3 {
  font-weight: normal;
  font-size: var(--h3size);
}

h4 {
  font-weight: normal;
  font-size: var(--h4size);
}

strong {
  font-size: var(--psize);
  font-weight: normal;
  margin: 0;
}

p,
#yearsAlive {
  font-size: var(--psize);
  color: #464545;
}

.chunk {
  width: 100%;
  height: 100vh;
  max-height: 100vw;
}

.chunkMinHeight {
  min-height: 43.75vw;
}

html,
body {
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.forceFooterDown {
  flex: 1 1 auto;
}

.header {
  position: fixed;
  z-index: 105;
  width: 100%;
  padding-left: calc(100vw - 100%);
  max-width: 100%;
  height: var(--headerHeight);
  box-shadow: 0px 0px 10px 0.5px rgba(0, 0, 0, 0.07);
  background-color: white;
  border-bottom: 1px solid rgb(226, 225, 225);
}
.header #headerFlexContainer {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem calc(var(--minPadding) - (100vw - 100%) / 2);
}
.header #headerFlexContainer #logo {
  height: calc(var(--h2size) * 0.9);
  margin: 0 auto;
}
.header #headerFlexContainer #headerRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style-type: none;
}
.header #headerFlexContainer #headerRight li {
  height: 100%;
}
.header #headerFlexContainer #headerRight li #headerContactButton,
.header #headerFlexContainer #headerRight li .desktopNav {
  font-size: calc(var(--h3size) * 0.95);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.3rem;
}
.header #headerFlexContainer #headerRight li #headerContactButton {
  color: #fff;
  border: 1px #ff9f06 solid;
  background-color: #ff9f06;
  border-radius: 0.3rem;
  margin-left: 2rem;
  transition: box-shadow 0.25s ease-in-out;
}
.header #headerFlexContainer #headerRight li #headerContactButton:hover {
  box-shadow: 0 0 7px 0 rgba(244, 154, 10, 0.8156862745);
  cursor: pointer;
}
.header #headerFlexContainer #headerRight li .desktopNav {
  color: #464545;
}
.header #headerFlexContainer #headerRight li .desktopNav:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #18191b;
  cursor: pointer;
}
.header #headerFlexContainer #headerRight li #openSideNav {
  position: relative;
  cursor: pointer;
  display: none;
  background-color: transparent;
  width: calc(var(--h3size) * 2.7);
  height: 100%;
  margin-left: var(--minPadding);
}
.header #headerFlexContainer #headerRight li #openSideNav #longBar,
.header #headerFlexContainer #headerRight li #openSideNav #midBar,
.header #headerFlexContainer #headerRight li #openSideNav #shortBar {
  height: 2px;
  min-height: 2px;
  margin: 0.45rem 0;
  background-color: rgb(37, 37, 37);
  transition: width 0.2s ease-in;
  margin-left: auto;
}
.header #headerFlexContainer #headerRight li #openSideNav #longBar {
  width: 100%;
}
.header #headerFlexContainer #headerRight li #openSideNav #midBar {
  width: 70%;
  animation: 2.5s expandNavBar infinite ease-out;
}
.header #headerFlexContainer #headerRight li #openSideNav #shortBar {
  width: 50%;
  animation: 2.5s expandNavBar infinite ease-out;
}

dialog {
  position: fixed;
  top: 0;
  right: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background-color: #18191b;
  animation: 0.3s animateLeft ease-in;
}
dialog .sideNavContents {
  padding: 10rem 5rem 0 5rem;
}
dialog ul > li {
  border-bottom: 0.5px solid #f7f7f7;
}
dialog ul,
dialog li {
  font-size: var(--h2size);
  font-weight: 600;
}
dialog ul a,
dialog li a {
  color: #fff;
  display: block;
  padding: 3rem 2rem;
  min-width: 200px;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in;
}
dialog ul a:hover,
dialog li a:hover {
  background-color: #47a7a2;
}
dialog #nestedList > li {
  border: none;
}
dialog #closeSideNav {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  margin: var(--minPadding) var(--minPadding) 0 0;
  background-color: transparent;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease-in;
}
dialog #closeSideNav img {
  height: calc(var(--headerHeight) - var(--h3size));
  margin: none;
}
dialog #closeSideNav:hover {
  background-color: #47a7a2;
  cursor: pointer;
}
dialog ul {
  list-style: none;
}
dialog #nestedList > li {
  padding-left: calc(var(--minPadding));
  color: #464545;
}

dialog.onClose {
  animation: 0.2s fadeOut ease-in;
}

#firstSection {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#firstSection #helloContent {
  max-width: var(--textContainerMax);
  margin: 0 var(--minPadding);
  padding-bottom: var(--helloContentPosition);
  text-align: left;
}
#firstSection #helloContent p,
#firstSection #helloContent #yearsAlive {
  font-size: calc(var(--h2size) * 0.8);
  font-weight: lighter;
}
#firstSection #helloContent * {
  color: #fff;
}
#firstSection video {
  -o-object-position: left;
     object-position: left;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  filter: brightness(30%);
}
#firstSection img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  -o-object-position: left;
     object-position: left;
  filter: brightness(30%);
}
#firstSection #iconScrollDown {
  position: absolute;
  left: 50%;
  background: url(./media/icons/line-angle-down-icon.svg) center no-repeat content-box;
  animation: 1.5s infinite scrollDown ease-in-out;
  width: 3.5rem;
  height: 3.5rem;
  padding: 1rem;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5rem;
}

#secondSection {
  padding: var(--contentWidth);
  position: relative;
  background-image: url(./media/pics/abstractBackground.webp);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#secondSection #customerContent {
  padding-top: var(--headerHeight);
  text-align: left;
  width: 100%;
  max-width: var(--textContainerMax);
  z-index: 99;
}
#secondSection #customerContent * :not(strong) {
  margin: 0 var(--minPadding);
}
#secondSection #customerContent .custContent a {
  margin: 0;
  -webkit-text-decoration: underline dotted hsl(168, 64%, 24%) 0.1rem;
          text-decoration: underline dotted hsl(168, 64%, 24%) 0.1rem;
}
#secondSection #customerContent .custContent:last-child {
  padding-top: 2rem;
}
#secondSection #customerContent h1 {
  text-align: center;
  margin-bottom: 1.4rem;
}
#secondSection #logoFlexContainer {
  overflow: hidden;
  width: var(--textContainerMax);
  position: relative;
  margin: var(--logoContainerMargin) 0;
  min-height: var(--logoContainerHeight);
}
#secondSection #logoFlexContainer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(255, 255, 255) 5%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgb(255, 255, 255) 95%);
  pointer-events: none;
  z-index: 1;
}
#secondSection .logosRow {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  animation: logoBannerScroll 55s linear infinite;
}
#secondSection .logoContainer {
  flex: 0 0 var(--customerLogoWidth);
  height: var(--logoContainerHeight);
}
#secondSection img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}

#thirdSection {
  position: relative;
  padding: calc(var(--minPadding)) calc(var(--minPadding));
  min-height: calc(500px + 3 * (var(--contentPadding)));
}
#thirdSection #thirdSectionContainer {
  position: relative;
  z-index: 6;
  height: 100%;
  width: 100%;
  padding: calc(var(--contentPadding) / 3) calc(var(--contentPadding) / 1.5);
  background-color: #fff;
  border-radius: 1.75rem 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 0.5rem 2rem rgba(17, 17, 26, 0.15);
}
#thirdSection #thirdSectionContainer #servicesContent {
  flex: 1;
  margin-right: 2rem;
}
#thirdSection #thirdSectionContainer #servicesContent h1 {
  color: hsl(168, 64%, 24%);
}
#thirdSection #thirdSectionContainer #cardFlexContainer {
  height: 100%;
  width: 100%;
  flex: 2.5;
  display: flex;
  flex-wrap: wrap;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard {
  margin: auto;
  padding: var(--serviceCardPadding);
  height: calc(50% - 1.25rem);
  min-height: 230px;
  width: calc(50% - 1.25rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  border-radius: 0.75rem;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard #learnMoreContainer {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: var(--h3size);
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard #learnMoreContainer::after {
  content: "";
  background: url("./media/icons/arrow-thin-right-icon.svg") no-repeat center;
  transform: rotate(-45deg) scale(1.5);
  height: var(--h3size);
  width: var(--h3size);
  transition: transform 0.25s ease-in-out;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard #learnMoreContainer h3 {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition-property: max-width, opacity, margin-right;
  transition-duration: 0.75s;
  transition-timing-function: ease-in-out;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard * {
  margin: 0.5rem 0;
  color: #fff;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition-property: max-height, opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard:hover p {
  height: auto;
  max-height: 500px;
  opacity: 1;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard:hover #learnMoreContainer h3 {
  max-width: 15rem;
  margin-right: 3rem;
  width: auto;
  overflow: hidden;
  opacity: 1;
}
#thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard:hover #learnMoreContainer::after {
  transform: rotate(0);
}
#thirdSection #thirdSectionContainer #cardFlexContainer #engineeringCard {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(./media/pics/engineering.webp) center no-repeat;
  background-size: cover;
}
#thirdSection #thirdSectionContainer #cardFlexContainer #manfacturingCard {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url(./media/pics/welding.webp) center no-repeat;
  background-size: cover;
}
#thirdSection #thirdSectionContainer #cardFlexContainer #productCard {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)), url(./media/pics/enclosures.webp) top no-repeat;
  background-size: cover;
}
#thirdSection #thirdSectionContainer #cardFlexContainer #deliverCard {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(./media/pics/Delivery\ Truck.webp) center no-repeat;
  background-size: cover;
}

#thirdSection::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2%;
  width: 100%;
  z-index: 5;
  height: 70%;
  background: #e5fddf;
  transform-origin: top left;
  transform: skewY(5deg);
}

#contactUsHeader {
  padding-top: var(--minPadding);
  padding-bottom: calc(var(--minPadding) / 1.5);
}

#productsQuote {
  margin-top: var(--minPadding);
}

#modifiedPageSection {
  padding-top: 0;
  padding-bottom: 0;
}

#contactMain {
  padding: 0 calc(var(--minPadding) * 2);
  margin-bottom: var(--minPadding);
  display: flex;
  flex-direction: row;
}
#contactMain section {
  background-color: hsl(168, 64%, 24%);
  padding: calc(var(--minPadding) / 1.5);
  flex: 1;
  max-width: 40%;
  border-radius: 0.5rem;
}
#contactMain section h1,
#contactMain section p {
  color: #fff;
  padding: 0.15rem;
}
#contactMain section form {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: calc(var(--minPadding) / 2.5);
}
#contactMain section form p {
  margin-bottom: 1rem;
  font-size: calc(var(--psize) * 1.2);
}
#contactMain section form .inputField {
  flex: 1 1 220px;
  min-height: var(--h1size);
  min-width: 100%;
  position: relative;
  margin: 0 0 calc(var(--minPadding) / 3) 0;
}
#contactMain section form .inputField .requiredIndicator {
  position: absolute;
  left: auto;
  right: 1rem;
  top: 1rem;
  color: rgb(225, 9, 9);
}
#contactMain section form .inputField input,
#contactMain section form .inputField textarea,
#contactMain section form .inputField button {
  width: 100%;
  height: 100%;
  padding: calc(var(--h2size) * 1.2) 1rem 1rem 1rem;
  font-size: var(--psize);
  border-radius: 0.35rem;
  resize: none;
}
#contactMain section form .inputField label {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0.25rem 0 0 1rem;
  transform: translateY(-50%);
  font-size: var(--psize);
  pointer-events: none;
  transition: ease-out 0.15s;
}
#contactMain section form .inputField textarea + label {
  top: 2rem;
}
#contactMain section form .inputField input:focus + label,
#contactMain section form .inputField textarea:focus + label {
  top: 0;
  transform: scale(0.8) translateX(-8%);
  color: #464545;
}
#contactMain section form .inputField input:not(:-moz-placeholder-shown) + label, #contactMain section form .inputField textarea:not(:-moz-placeholder-shown) + label {
  top: 0;
  transform: scale(0.8) translateX(-8%);
  color: #464545;
}
#contactMain section form .inputField input:not(:placeholder-shown) + label,
#contactMain section form .inputField textarea:not(:placeholder-shown) + label {
  top: 0;
  transform: scale(0.8) translateX(-8%);
  color: #464545;
}
#contactMain section form .fullWidth {
  flex: 1 1 100%;
}
#contactMain section form .fullWidth button {
  padding: 1.25rem;
  background-color: #ff9f06;
  color: #fff;
  font-weight: 500;
  transition: box-shadow 0.25s ease-in-out;
}
#contactMain section form .fullWidth button:hover {
  cursor: pointer;
  box-shadow: 0 0 10px 0 rgba(244, 154, 10, 0.8156862745);
}
#contactMain #mapElements {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding: 0 0 0 calc(var(--minPadding) / 2);
}
#contactMain #mapElements p {
  color: #18191b;
  padding: 0.25rem 0;
}
#contactMain #mapElements a {
  -webkit-text-decoration: dotted underline #464545;
          text-decoration: dotted underline #464545;
}
#contactMain #mapElements #map {
  flex: 1.5;
  border: 1px solid rgba(0, 140, 21, 0.2117647059);
  min-height: 200px;
}
#contactMain #mapElements #mapAddress {
  flex: 1;
  margin-top: calc(var(--minPadding) / 1.5);
}
#contactMain #mapElements #mapAddress #acknowledgement {
  margin-top: 1.5rem;
  font-size: calc(var(--psize) * 0.6);
}

.pageHeader {
  height: var(--commonPageHeaderHeight);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  background-size: cover;
  padding: 0 0 var(--minPadding) calc(var(--minPadding) * 1.75);
}
.pageHeader h1 {
  font-family: NHD;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--businessh1Size);
  margin-bottom: 0rem;
}

#engineeringHeader {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(./media/pics/EngineeringHeader.webp);
}

#manufacturingHeader {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(./media/pics/ManufacturingHeader.webp);
  background-position: bottom;
}

#deliverHeader {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(./media/pics/logisticsShipping.webp);
  background-position: bottom;
}

#aboutUsHeader {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(./media/pics/aboutUsHeader.webp);
  background-position: top;
}

#productsHeader {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(./media/pics/warehouse.webp);
  background-position: top;
}

#contactHeader {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(./media/pics/sytecBuilding.webp);
  background-position: top;
  background-size: cover;
}

.pageSection {
  background-color: white;
  padding: calc(var(--minPadding) * 1.75) var(--minPadding);
}
.pageSection * {
  width: var(--textContainerMax);
  margin: 0 auto;
  max-width: 100%;
}
.pageSection h2 {
  border-left: solid 1rem hsl(168, 64%, 24%);
  padding-left: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.75rem;
}

.contentList {
  background-color: white;
  padding-bottom: 5rem;
}
.contentList .contentContainer {
  display: flex;
  padding-left: calc((100% - (var(--textContainerMax))) / 2);
  height: 475px;
  margin-bottom: 2rem;
}
.contentList .contentContainer hgroup {
  flex: 0 0 calc(var(--textContainerMax) / 2 - 1rem);
  padding: 0 var(--minPadding);
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #eef5f2;
}
.contentList .contentContainer hgroup h2 {
  font-weight: 800;
  color: hsl(168, 64%, 24%);
  margin-bottom: 1rem;
}
.contentList .contentContainer hgroup p em {
  font-size: var(--psize);
}
.contentList .contentContainer img {
  flex: 1;
  width: 100%;
  height: 100%;
  margin-left: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
  min-width: 0;
}
.contentList .contentContainer:nth-child(even) {
  flex-direction: row-reverse;
  padding-right: calc((100% - (var(--textContainerMax))) / 2);
  padding-left: 0;
}
.contentList .contentContainer:nth-child(even) hgroup {
  margin-left: 1rem;
  margin-right: 0;
}
.contentList .contentContainer:nth-child(even) img {
  margin-right: 1rem;
  margin-left: 0;
}


/*#gallery*/
.gallery {
  background-color: #f4f4f4;
  padding: 5rem 0;
}

.gallery h2 {
  font-size: calc(var(--h2size) * 1.5);
  border: none;
  margin-bottom: 2rem;
  text-align: center;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-item {
  margin: 10px;
  width: 400px;
  /* Fixing the width of each gallery item */
  height: 200px;
  /* Fixing the height of each gallery item */
  overflow: hidden;
  /* To ensure images don't overflow the fixed height */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Ensures the entire image is visible within the fixed height and width */
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Media query for tablets */
@media (min-width: 768px) {
  .gallery-item {
    width: calc(33.3333% - 20px);
    /* Adjusting width for tablets */
  }
}
/* Media query for desktops */
@media (min-width: 992px) {
  .gallery-item {
    width: calc(25% - 20px);
    /* Adjusting width for desktops */
  }
}
.aboutUsSections {
  background-color: white;
  padding: calc(var(--minPadding) / 2) var(--minPadding) 0 var(--minPadding);
}
.aboutUsSections * {
  width: var(--textContainerMax);
  margin: 0 auto;
  max-width: 100%;
}
.aboutUsSections img {
  display: block;
}
.aboutUsSections .aboutUsSnippet {
  padding-top: calc(var(--minPadding) / 2);
  padding-bottom: var(--minPadding);
}
.aboutUsSections h2 {
  border-left: solid 1rem hsl(168, 64%, 24%);
  padding-left: 1.5rem;
  margin-top: calc(var(--minPadding) * 0.75);
  font-weight: 500;
  margin-bottom: 1.75rem;
}

.productsModel {
  position: relative;
  width: var(--textContainerMax);
  margin: calc(var(--minPadding)) auto;
  padding: calc(var(--minPadding) / 2);
  box-shadow: rgba(0, 0, 0, 0.08) 0px -5px 15px 3px inset;
  border-radius: 0.35rem;
}
.productsModel .modelTitle {
  position: absolute;
  bottom: 15%;
  left: 7%;
  font-size: calc(var(--h2size) * 0.8);
  background-color: rgba(0, 0, 0, 0.07);
  padding: 1rem 3rem;
  border-radius: 0.25rem;
  font-weight: 600;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.productsModel .modelHint {
  font-size: calc(var(--psize) * 0.75);
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
}
.productsModel button {
  color: white;
  background-color: hsl(168, 64%, 24%);
  font-size: calc(var(--h2size) * 0.7);
  font-weight: 600;
  border-radius: 4px;
  padding: 1rem 2rem;
  border: none;
  position: absolute;
  top: 5%;
  right: 5%;
  border-radius: 1rem;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.productsModel img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

#spotlight .spl-title {
  color: white;
}

model-viewer {
  width: 100%;
  height: 400px;
}

#footer {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  padding: calc(var(--minPadding) / 1.25) var(--minPadding);
  background-color: #1b1b1b;
  justify-content: center;
}
#footer ul {
  list-style: none;
  margin: auto 2rem;
}
#footer h3 {
  font-weight: bold;
  color: white;
  margin-bottom: 0.15rem;
}
#footer img {
  height: 2.75rem;
}
#footer #externalLinks li {
  display: inline;
  padding: 0 0.8rem;
}
#footer #footerTagline {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
}
#footer #footerTagline #second {
  margin-left: 1rem;
}
#footer #footerTagline #third {
  margin-left: 3rem;
}
#footer #footerTagline h2 {
  padding: 0.25rem 0;
  color: rgba(255, 255, 255, 0.3019607843);
}

#footer * {
  color: #f8f8f8;
  margin-bottom: 0.05rem;
}

.animateLeft,
.animateRight {
  opacity: 0;
}

.buttonTransition {
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.fullscreenView {
  height: 80vh;
  width: 100%;
  margin-top: var(--headerHeight);
  border: 2rem solid white;
}

.heroScreen {
  border-radius: 1rem;
  background: no-repeat center url("./media/pics/landingPageAssets/heroGreenBackgroud.webp");
  width: 100%;
  height: 100%;
  padding: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.heroScreen .heroText {
  flex: 1;
}
.heroScreen .heroText h1,
.heroScreen .heroText p {
  color: white;
}
.heroScreen .heroModel {
  flex: 1;
}

.heroModel {
  position: relative;
  width: 100%;
  height: 100%;
}
.heroModel model-viewer {
  height: 100%;
  width: 100%;
}

.blurbsection {
  margin: 13rem 7rem;
  text-align: center;
}
.blurbsection a {
  -webkit-text-decoration: underline dotted #464545 0.1rem;
          text-decoration: underline dotted #464545 0.1rem;
}
.blurbsection #homeButton {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 3rem auto;
  padding: 1.5rem;
  font-size: var(--h3size);
  background-color: hsl(168, 64%, 24%);
  border-radius: 25rem;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: all 0.25s ease-in-out;
}
.blurbsection #homeButton:hover {
  background-color: white;
  color: hsl(168, 64%, 24%);
  box-shadow: 0 0 7px 0 hsl(168, 64%, 24%);
  cursor: pointer;
}

@keyframes animateLeft {
  0% {
    opacity: 0;
    transform: translate(10%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes animateRight {
  0% {
    opacity: 0;
    transform: translate(-10%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes fadeOut {
  to {
    opacity: 0.1;
    transform: translate(30%, 0);
  }
}
@keyframes scrollDown {
  0% {
    bottom: 15%;
    opacity: 0.15;
  }
  60%, 100% {
    bottom: 11%;
    opacity: 1;
  }
}
@keyframes logoBannerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc((var(--customerLogoWidth)) * -7));
  }
}
@keyframes logoBannerScrollReverse {
  0% {
    transform: translateX(calc((var(--customerLogoWidth)) * -7));
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes expandNavBar {
  30%, 70% {
    width: 100%;
  }
}
@media (max-width: 1420px) {
  #thirdSection {
    padding: calc(var(--chunkPaddingTopBot) * 1.5) calc(var(--contentPadding) / 2);
  }
  #contactMain section {
    flex: 1;
    max-width: 50%;
  }
  #contactMain #mapElements {
    flex: 1;
  }
  #contactMain #mapElements #map {
    flex: 3;
  }
}
@media (max-width: 1280px) {
  :root {
    --logoContainerHeight: 5rem;
  }
}
@media (max-width: 1150px) {
  :root {
    --minPadding: 3rem;
    --serviceCardPadding: 2rem;
    --largePicMargin: 1rem;
  }
  #thirdSection {
    height: auto;
  }
  #thirdSection #thirdSectionContainer {
    flex-direction: column;
  }
  #thirdSection #thirdSectionContainer #servicesContent {
    flex: 1;
    margin-bottom: 2rem;
    margin-right: 0;
  }
  #thirdSection #thirdSectionContainer #cardFlexContainer {
    height: 100%;
    width: 100%;
    flex: 2.5;
  }
  #thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard {
    margin: 0.625rem;
    width: calc(50% - 2rem);
  }
  #thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard p {
    height: auto;
    max-height: 500px;
    opacity: 1;
  }
  #thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard #learnMoreContainer h3 {
    max-width: 15rem;
    margin-right: 3rem;
    width: auto;
    overflow: hidden;
    opacity: 1;
  }
  #thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard #learnMoreContainer::after {
    transform: rotate(0);
  }
  .pageSection {
    padding: calc(var(--minPadding) * 2.25) var(--minPadding);
  }
  #footerTagline {
    display: none;
  }
}
@media (max-width: 900px) {
  * {
    font-size: 10.5px;
  }
  :root {
    --largePicFlex: 1;
    --logoContainerHeight: 6rem;
    --textContainerMax: 85vw;
    --commonPageHeaderHeight: 360px;
    --businessh1Size: 8vw;
  }
}
@media (max-width: 800px) {
  :root {
    --serviceCardPadding: 3rem;
  }
  .chunk {
    max-height: none;
  }
  .header #headerFlexContainer #headerRight li .desktopNav {
    display: none;
  }
  .header #headerFlexContainer #headerRight li #openSideNav {
    display: block;
  }
  #thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard {
    width: 100%;
    margin: 1.75rem auto;
    min-height: 45.4545454545vw;
  }
}
@media (max-width: 600px) {
  * {
    font-size: 9.5px;
  }
  :root {
    --commonPageHeaderHeight: 275px;
    --psize: 1.6rem;
  }
  #mainPage #helloContent {
    text-align: center;
  }
  #mainPage #helloContent p,
  #mainPage #helloContent #yearsAlive {
    font-size: var(--psize);
  }
  #thirdSection {
    padding: 0 0;
    background-color: #f7f7f7;
  }
  #thirdSection #thirdSectionContainer {
    padding: var(--chunkPaddingTopBot) var(--minPadding);
    box-shadow: none;
  }
  .pageSection {
    padding: calc(var(--minPadding) * 2) calc(var(--minPadding)) 0 calc(var(--minPadding));
  }
  .contentList {
    padding: 0;
  }
  .contentList .contentContainer,
  .contentList .contentContainer:nth-of-type(even) {
    flex-direction: column;
    margin: calc(var(--minPadding) * 2) var(--minPadding);
    padding: 0;
    height: auto;
    border: 1px solid #f5f4f4;
    border-radius: 0.5rem;
  }
  .contentList .contentContainer hgroup,
  .contentList .contentContainer:nth-of-type(even) hgroup {
    padding: calc(var(--minPadding) * 1.25);
    border-radius: none;
    border: none;
    margin: 0;
    border-radius: 0;
    max-height: 300px;
  }
  .contentList .contentContainer img,
  .contentList .contentContainer:nth-of-type(even) img {
    margin: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    max-height: 300px;
  }
  #footer ul:first-child {
    display: none;
  }
  #footer img {
    height: 3rem;
  }
  #footer #externalLinks {
    display: flex;
    flex-direction: column;
  }
  #footer #externalLinks li {
    padding: 0;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 450px) {
  #contactMain {
    padding: 0 calc(var(--minPadding));
    display: flex;
    flex-direction: column;
  }
  #contactMain section {
    max-width: 100%;
    padding: calc(var(--minPadding) * 1.25);
  }
  #contactMain #mapElements {
    flex: 1;
    min-height: 70vh;
    padding: var(--minPadding) 0;
  }
  :root {
    --chunkPaddingTopBot: 10rem;
    --helloContentPosition: 25rem;
    --commonPageHeaderHeight: 200px;
  }
  .chunkMinHeight {
    min-height: 650px;
  }
  #headerContactButton {
    display: none;
  }
  #thirdSection #thirdSectionContainer #cardFlexContainer .servicesCard {
    height: 75.1879699248vw;
  }
  #contactMain {
    padding: 0 calc(var(--minPadding) / 2);
  }
}/*# sourceMappingURL=styles.css.map */