/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  cursor: default;
}

h2, h4, h5 {
  line-height: 1em;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --darker-blue-bg: #0F1D2A;
  --ligher-blue-bg: #1E3554;
  --darker-green-bg: #001510;
  --ligher-green-bg: #11283A;
  --light-accent-bg: #E9997F;
  --black: black;
  --white: white;
  --section-par-text-color: #97c5ff;
  --section-title-text-shadow: 2px 2px 0px var(--ligher-blue-bg), -2px -2px 0px var(--ligher-blue-bg);
  --par-text-shadow: 2px 2px 3px var(--black);
  --hero-text-shadow: 0px 4px 12px black;
  --button-border: #5B5B5B;
  --button-background: #2B2B2B;
  --button-icon-color: #bdbbbb;
  --main-header-size: calc(12px + 4vmax);
  --main-header-size-mobile: calc(12px + 3vmax);
  --main-subheader-size: calc(12px + 2vmax);
  --main-subheader-handwriting-size: calc(12px + 3vmax);
  --paragraph-size: calc(12px + 1vmin);
  --font-main-heading: "Rowdies", cursive;
  --font-sub-heading: "Hammersmith One", sans-serif;
  --font-hand-writing: "Dancing Script", cursive;
  --pragraph-font: "Rubik", sans-serif;
  --default-transition-duration: 0.6s ease-out;
  --project-transition-duration: 1s ease-in-out;
}

.header {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 10;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
.header .holdingPhoneEl {
  z-index: 2;
  position: fixed;
  transition: var(--default-transition-duration);
  width: 800px;
  transform: translate(-1150px, -450px) rotate(-50deg);
}
.header .holdingPhoneEl .headerListDiv {
  width: 223px;
  margin-left: 450px;
  transform: translateY(570px);
  display: flex;
  flex-direction: column;
}
.header .holdingPhoneEl .headerListDiv button {
  border: 0px solid white;
  background: rgb(109, 109, 109);
  border-radius: 10px;
  color: white;
  font-family: var(--font-main-heading);
  width: fit-content;
  align-self: self-end;
  margin-right: 10px;
  cursor: pointer;
  padding: 0px 7px;
}
.header .holdingPhoneEl .headerListDiv ul {
  list-style: none;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.header .holdingPhoneEl .headerListDiv ul li {
  font-family: var(--font-main-heading);
  cursor: pointer;
}
.header .holdingPhoneEl .headerListDiv ul li:hover {
  text-shadow: 2px 2px 1px var(--darker-blue-bg), -2px -2px 1px var(--darker-blue-bg);
}
.header .holdingPhoneEl .headerListDiv ul li a {
  text-decoration: none;
  color: var(--white);
}
.header .holdingPhoneEl .headerListDiv .iconContainer {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-top: 30px;
  padding-left: 40px;
}
.header .holdingPhoneEl .headerListDiv .iconContainer a {
  width: fit-content;
}
.header .holdingPhoneEl .headerListDiv .iconContainer a i {
  font-size: 2em;
  color: var(--white);
  cursor: pointer;
}
.header .openHeaderContainer {
  position: fixed;
}
.header .openHeaderContainer button {
  background: var(--button-background);
  border: 5px var(--button-border) solid;
  border-radius: 9999px;
  padding: 4px 15px;
  cursor: pointer;
  position: relative;
}
.header .openHeaderContainer button:hover i {
  transform: translateY(5px);
}
.header .openHeaderContainer button:hover .fa-map-pin {
  transform: translateY(-3px);
}
.header .openHeaderContainer button i {
  font-size: 1.2rem;
  padding: 0.5rem;
  color: var(--button-icon-color);
  transform: translateY(6px);
  transition: var(--default-transition-duration);
}
.header .openHeaderContainer button .fa-map-pin {
  position: absolute;
  top: 0;
  right: 21px;
  color: #913c3c;
  font-size: 1.3rem;
  transform: translateY(-6px);
}
.header .dayNightSwitchContainer .switch {
  display: inline-block;
  position: relative;
}
.header .dayNightSwitchContainer .switch__input {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.header .dayNightSwitchContainer .switchLabel {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 60px;
  background-color: var(--button-background);
  border: 5px solid var(--button-border);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.header .dayNightSwitchContainer .switch__indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(-72%);
  display: block;
  width: 40px;
  height: 40px;
  background-color: var(--button-icon-color);
  border-radius: 9999px;
  box-shadow: 10px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
}
.header .dayNightSwitchContainer .switch__indicator::before, .header .dayNightSwitchContainer .switch__indicator::after {
  position: absolute;
  content: "";
  display: block;
  background-color: #FFFFFF;
  border-radius: 9999px;
}
.header .dayNightSwitchContainer .switch__indicator::before {
  top: 7px;
  left: 7px;
  width: 9px;
  height: 9px;
  background-color: #FFFFFF;
  opacity: 0.6;
}
.header .dayNightSwitchContainer .switch__indicator::after {
  bottom: 8px;
  right: 6px;
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  opacity: 0.8;
}
.header .dayNightSwitchContainer .switch__decoration {
  position: absolute;
  top: 65%;
  left: 50%;
  display: block;
  width: 5px;
  height: 5px;
  background-color: #FFFFFF;
  border-radius: 9999px;
  animation: twinkle 0.8s infinite -0.6s;
}
.header .dayNightSwitchContainer .switch__decoration::before, .header .dayNightSwitchContainer .switch__decoration::after {
  position: absolute;
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  background-color: #FFFFFF;
  border-radius: 9999px;
}
.header .dayNightSwitchContainer .switch__decoration::before {
  top: -20px;
  left: 10px;
  opacity: 1;
  animation: twinkle 0.6s infinite;
}
.header .dayNightSwitchContainer .switch__decoration::after {
  top: -7px;
  left: 30px;
  animation: twinkle 0.6s infinite -0.2s;
}
@keyframes twinkle {
  50% {
    opacity: 0.2;
  }
}
.header .dayNightSwitchContainer .switch__indicator, .header .dayNightSwitchContainer .switch__indicator::before, .header .dayNightSwitchContainer .switch__indicator::after {
  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel {
  background-color: #8FB5F5;
  border-color: #347CF8;
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__indicator {
  background-color: #ECD21F;
  box-shadow: none;
  transform: translate(-50%, -50%) translateX(72%);
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__indicator::before, .header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__indicator::after {
  display: none;
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__decoration {
  top: 50%;
  transform: translate(0%, -50%);
  animation: cloud 8s linear infinite;
  width: 20px;
  height: 20px;
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__decoration::before {
  width: 10px;
  height: 10px;
  top: auto;
  bottom: 0;
  left: -8px;
  animation: none;
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__decoration::after {
  width: 15px;
  height: 15px;
  top: auto;
  bottom: 0;
  left: 16px;
  animation: none;
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__decoration, .header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__decoration::before, .header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__decoration::after {
  border-radius: 9999px 9999px 0 0;
}
.header .dayNightSwitchContainer .switch__input:checked + .switchLabel .switch__decoration::after {
  border-bottom-right-radius: 9999px;
}
@keyframes cloud {
  0% {
    transform: translate(0%, -50%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(0%, -50%);
  }
}

.sectionOne {
  user-select: none;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.sectionOne .imageTextContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sectionOne .imageTextContainer .heroText {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 15%;
}
.sectionOne .imageTextContainer .heroText h1, .sectionOne .imageTextContainer .heroText h2 {
  transform: translateY(50px);
  transition: var(--default-transition-duration);
  text-align: center;
  padding: 2rem 2rem;
  text-shadow: var(--hero-text-shadow);
  white-space: nowrap;
  color: var(--black);
}
.sectionOne .imageTextContainer .heroText h1 {
  font-family: var(--font-main-heading);
  font-size: var(--main-header-size);
  margin-bottom: -2rem;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  transform: translateY(50px);
}
@media screen and (max-width: 300px) {
  .sectionOne .imageTextContainer .heroText h1 {
    font-size: var(--main-header-size-mobile);
  }
}
.sectionOne .imageTextContainer .heroText h2 {
  font-family: var(--font-sub-heading);
  font-size: var(--main-subheader-size);
  margin-top: -1rem;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transform: translateY(-50px);
  line-height: normal;
}
.sectionOne .imageTextContainer .heroText h2 span {
  font-family: var(--font-hand-writing);
  font-size: var(--main-subheader-handwriting-size);
}
.sectionOne .imageTextContainer .heroImages {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}
.sectionOne .imageTextContainer .heroImages .heroImg {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  bottom: 0;
  object-position: bottom;
}
.sectionOne .imageTextContainer .heroImages .heroImg1 {
  transform: translateY(160px);
  z-index: 3;
}
@media screen and (max-width: 1600px) {
  .sectionOne .imageTextContainer .heroImages .heroImg1 {
    transform: translateY(70px);
  }
}
.sectionOne .imageTextContainer .heroImages .heroImg2 {
  transform: translateY(50px);
  z-index: 2;
}
@media screen and (max-width: 1600px) {
  .sectionOne .imageTextContainer .heroImages .heroImg2 {
    transform: translateY(20px);
  }
}
.sectionOne .imageTextContainer .heroImages .weather {
  transition: var(--default-transition-duration);
}
.sectionOne .imageTextContainer .heroImages .heroImgNight {
  opacity: 1;
}
.sectionOne .imageTextContainer .heroImages .heroImgDay {
  opacity: 0;
}
.sectionOne .imageTextContainer .heroImages .heroImgMoon {
  opacity: 1;
}
.sectionOne .imageTextContainer .heroImages .heroImgSun {
  opacity: 0;
  transform: translateY(500px);
}

.sectionTwo {
  user-select: none;
  min-height: 100vh;
  width: 100%;
  background-color: var(--darker-blue-bg);
  background-image: url("/assets/grain.png");
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: row;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media screen and (max-width: 1000px) {
  .sectionTwo {
    flex-direction: column;
    padding-bottom: 2rem;
  }
}
.sectionTwo .sectionTwoDiv {
  width: 100%;
}
.sectionTwo .sectionTwoText {
  padding: 1em 0em 1em 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1100px;
}
.sectionTwo .sectionTwoText .sectionTwoTextElements {
  max-width: 70%;
  margin-top: -4rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media screen and (max-width: 1200px) {
  .sectionTwo .sectionTwoText .sectionTwoTextElements {
    margin-top: -8rem;
  }
}
@media screen and (max-width: 1000px) {
  .sectionTwo .sectionTwoText .sectionTwoTextElements {
    margin-top: 0rem;
  }
}
@media screen and (max-height: 62000px) {
  .sectionTwo .sectionTwoText .sectionTwoTextElements {
    margin-top: 0rem;
  }
}
.sectionTwo .sectionTwoText .sectionTwoTextElements h2 {
  font-family: var(--font-sub-heading);
  font-size: var(--main-header-size);
  text-shadow: var(--darker-blue-bg);
  color: var(--darker-blue-bg);
  transform: translateY(50px);
  transition: var(--default-transition-duration);
  opacity: 0;
}
.sectionTwo .sectionTwoText .sectionTwoTextElements p {
  font-size: var(--paragraph-size);
  color: var(--section-par-text-color);
  transition: var(--default-transition-duration);
  opacity: 0;
  transform: translateY(50px);
  text-shadow: var(--par-text-shadow);
  font-family: var(--pragraph-font);
}
.sectionTwo .sectionTwoImage {
  padding: 0em 2em 0em 0em;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-width: 1100px;
}
@media screen and (max-width: 1000px) {
  .sectionTwo .sectionTwoImage {
    padding: 2em;
    padding-top: 0em;
    display: flex;
    justify-content: center;
  }
}
.sectionTwo .sectionTwoImage div {
  width: fit-content;
  height: fit-content;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.sectionTwo .sectionTwoImage div .headshotContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
}
@media screen and (max-width: 1000px) {
  .sectionTwo .sectionTwoImage div .headshotContainer {
    padding: 0em;
  }
}
@media screen and (min-width: 2000px) {
  .sectionTwo .sectionTwoImage div .headshotContainer {
    min-width: 100%;
  }
}
.sectionTwo .sectionTwoImage div .headshotContainer img {
  position: relative;
  height: 100%;
  min-width: 100%;
  max-width: 600px;
  object-fit: cover;
  margin: 0 auto;
}
.sectionTwo .sectionTwoImage div .headshotOutline {
  object-fit: fill;
  z-index: 2;
}
.sectionTwo .mole {
  position: absolute;
  width: 25vw;
  left: 0;
  transform: translateY(-50px);
}
@media screen and (max-width: 950px) {
  .sectionTwo .mole {
    display: none;
  }
}
.sectionTwo .bedrock {
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 70vw;
  transform: translateY(0rem);
  padding-right: 1rem;
}
@media screen and (max-width: 1000px) {
  .sectionTwo .bedrock {
    display: none;
  }
}
.sectionTwo .bedrockMobile {
  display: none;
  position: absolute;
  top: 15%;
  z-index: -1;
  width: 100vw;
  transform: translateY(0rem);
}
@media screen and (max-width: 1000px) {
  .sectionTwo .bedrockMobile {
    display: block;
  }
}
@media screen and (max-width: 800px) {
  .sectionTwo .bedrockMobile {
    top: 23%;
  }
}
@media screen and (max-width: 600px) {
  .sectionTwo .bedrockMobile {
    top: 30%;
  }
}
@media screen and (max-width: 450px) {
  .sectionTwo .bedrockMobile {
    top: 37%;
  }
}
@media screen and (max-width: 350px) {
  .sectionTwo .bedrockMobile {
    top: 47%;
  }
}
@media screen and (max-width: 300px) {
  .sectionTwo .bedrockMobile {
    top: 51%;
  }
}

.sectionThree {
  user-select: none;
  padding-bottom: 8rem;
  width: 100%;
  background-color: var(--darker-blue-bg);
  background-image: url("/assets/grain.png");
  overflow: hidden;
}
@media screen and (max-width: 900px) {
  .sectionThree {
    min-height: 40vh;
  }
}
.sectionThree .railroadContainer {
  width: 100%;
  overflow: hidden;
  padding: 2rem 0rem 0rem 0rem;
  transform: rotate(1.5deg) scale(1.01);
  position: relative;
}
.sectionThree .railroadContainer .railroadTrack {
  min-height: 200px;
  width: 100%;
  object-fit: cover;
}
.sectionThree .railroadContainer .railroadTrackDesktop {
  display: block;
}
.sectionThree .railroadContainer .railroadTrackMobile {
  display: none;
}
@media screen and (max-width: 700px) {
  .sectionThree .railroadContainer .railroadTrackDesktop {
    display: none;
  }
  .sectionThree .railroadContainer .railroadTrackMobile {
    display: block;
  }
}
.sectionThree .railroadContainer .htmlCart {
  position: absolute;
  bottom: 0%;
  height: 19vmax;
  animation: moveCart 20s infinite linear;
}
.sectionThree .railroadContainer .htmlCartWheel {
  animation: cartWheel 20s infinite linear;
}
.sectionThree .railroadContainer .cssCart {
  position: absolute;
  bottom: 0%;
  left: -20%;
  height: 19vmax;
  animation: moveCart 20s infinite linear;
  animation-delay: 3s;
}
.sectionThree .railroadContainer .cssCartWheel {
  animation: cartWheel 20s infinite linear;
  animation-delay: 3s;
  left: -20%;
}
.sectionThree .railroadContainer .jsCart {
  position: absolute;
  bottom: 0%;
  left: -20%;
  height: 19vmax;
  animation: moveCart 20s infinite linear;
  animation-delay: 6s;
}
.sectionThree .railroadContainer .jsCartWheel {
  animation: cartWheel 20s infinite linear;
  animation-delay: 6s;
  left: -20%;
}
.sectionThree .railroadContainer .nodeCart {
  position: absolute;
  bottom: 0%;
  left: -20%;
  height: 19vmax;
  animation: moveCart 20s infinite linear;
  animation-delay: 9s;
}
.sectionThree .railroadContainer .nodeCartWheel {
  animation: cartWheel 20s infinite linear;
  animation-delay: 9s;
  left: -20%;
}
.sectionThree .railroadContainer .vueCart {
  position: absolute;
  bottom: 0%;
  left: -20%;
  height: 19vmax;
  animation: moveCart 20s infinite linear;
  animation-delay: 12s;
}
.sectionThree .railroadContainer .vueCartWheel {
  animation: cartWheel 20s infinite linear;
  animation-delay: 12s;
  left: -20%;
}
.sectionThree .railroadContainer .herokuCart {
  position: absolute;
  bottom: 0%;
  left: -20%;
  height: 19vmax;
  animation: moveCart 20s infinite linear;
  animation-delay: 15s;
}
.sectionThree .railroadContainer .herokuCartWheel {
  animation: cartWheel 20s infinite linear;
  animation-delay: 15s;
  left: -20%;
}
@keyframes moveCart {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}
.sectionThree .railroadContainer .leftWheel {
  transform-origin: 32% 85%;
}
.sectionThree .railroadContainer .rightWheel {
  transform-origin: 67% 85%;
}
@keyframes cartWheel {
  0% {
    transform: rotate(0deg);
    left: -20%;
  }
  100% {
    transform: rotate(5000deg);
    left: 120%;
  }
}

.sectionFour {
  width: 100%;
  background-color: var(--darker-blue-bg);
}
.sectionFour .project {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-image: url("/assets/grain.png");
}
.sectionFour .project:nth-child(even) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 1000px) {
  .sectionFour .project {
    flex-direction: column;
  }
  .sectionFour .project:nth-child(even) {
    flex-direction: column;
  }
}
.sectionFour .project .sectionFourImg {
  width: 100%;
  padding: 1rem;
  max-width: 900px;
  display: flex;
  align-self: center;
}
.sectionFour .project .sectionFourImg div {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.sectionFour .project .sectionFourImg div .projectCover {
  width: 100%;
}
.sectionFour .project .sectionFourImg div .overlay {
  position: absolute;
  top: 0;
  transition: 0.5s ease-in;
  transform-style: preserve-3d;
}
.sectionFour .project .sectionFourImg div .bones {
  transform: perspective(500px) translateZ(20px) rotateY(0deg);
}
.sectionFour .project .sectionFourImg div .projectImgOne {
  transform: perspective(500px) translateZ(20px) rotateY(-90deg);
}
.sectionFour .project .sectionFourImg div .projectImgTwo {
  transform: perspective(1000px) translateZ(20px) rotateY(-90deg);
}
.sectionFour .project .sectionFourImg div .projectVideo {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: 0.7s ease-in;
  opacity: 0;
}
.sectionFour .project .sectionFourImg div .projectVideo .videoElement {
  transition: 1s ease-out;
  border-radius: 150px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(0.75);
}
.sectionFour .project .sectionFourImg .viewPerformante:hover .projectImg {
  opacity: 0;
}
.sectionFour .project .sectionFourImg .viewPerformante:hover .projectOneVideoEl {
  opacity: 1;
}
.sectionFour .project .sectionFourImg .viewTwitter:hover .projectImg {
  opacity: 0;
}
.sectionFour .project .sectionFourImg .viewTwitter:hover .projectTwoVideoEl {
  opacity: 1;
}
.sectionFour .project .sectionFourImg .viewVmm:hover .projectImg {
  opacity: 0;
}
.sectionFour .project .sectionFourImg .viewVmm:hover .projectThreeVideoEl {
  opacity: 1;
}
.sectionFour .project .sectionFourImg .viewEmpire:hover .projectImg {
  opacity: 0;
}
.sectionFour .project .sectionFourImg .viewEmpire:hover .projectFourVideoEl {
  opacity: 1;
}
.sectionFour .project .sectionFourText {
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-self: center;
  max-width: 900px;
}
.sectionFour .project .sectionFourText h4 {
  user-select: none;
  padding: 1rem 2rem 1rem 2rem;
  font-family: var(--font-sub-heading);
  font-size: var(--main-header-size);
  transition: var(--default-transition-duration);
  opacity: 0;
  text-shadow: var(--darker-blue-bg);
  transform: translateY(50px);
  color: var(--darker-blue-bg);
}
.sectionFour .project .sectionFourText p {
  user-select: none;
  font-family: var(--pragraph-font);
  font-size: var(--paragraph-size);
  color: var(--darker-blue-bg);
  transition: var(--default-transition-duration);
  opacity: 0;
  transform: translateY(50px);
  text-shadow: var(--darker-blue-bg);
  padding: 0rem 2rem 0rem 2rem;
}
.sectionFour .project .sectionFourText a {
  margin: 2rem 2rem 2rem 2rem;
  max-width: 170px;
  cursor: pointer;
}
.sectionFour .project .sectionFourText a button {
  width: 100%;
  padding: 3px 0px;
  height: 100%;
  cursor: pointer;
  font-family: var(--font-sub-heading);
  border: solid 2px var(--section-par-text-color);
  color: var(--section-par-text-color);
  background-color: var(--black);
  border-radius: 5px;
  transition: var(--default-transition-duration);
  opacity: 0;
  transform: translateY(50px);
}
.sectionFour .project .sectionFourText a button:hover {
  border: solid 2px var(--section-par-text-color);
  color: var(--black);
  background-color: var(--section-par-text-color);
}
@media screen and (max-width: 400px) {
  .sectionFour .project .sectionFourText h4 {
    padding: 1rem;
  }
  .sectionFour .project .sectionFourText p {
    padding: 0rem 1rem 0rem 1rem;
  }
}

.sectionFive {
  width: 100%;
  background-color: var(--darker-blue-bg);
  background-image: url("/assets/grain.png");
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sectionFive .oilPatch {
  width: 100%;
}
.sectionFive .serviceContainer {
  background-color: var(--black);
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  padding: 0rem 2rem 2rem 2rem;
  gap: 1rem;
  min-height: 80vh;
}
.sectionFive .serviceContainer .step {
  min-width: 120px;
  max-width: 1500px;
  border-radius: 15px;
  transition: 2s;
  overflow: hidden;
  width: 0%;
  position: relative;
  transition: var(--default-transition-duration);
  cursor: pointer;
  user-select: none;
}
.sectionFive .serviceContainer .step img {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  filter: brightness(1);
  transition: var(--default-transition-duration);
}
.sectionFive .serviceContainer .step h4, .sectionFive .serviceContainer .step h5, .sectionFive .serviceContainer .step p {
  color: var(--black);
  cursor: pointer;
  margin: 1rem;
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 1px var(--section-par-text-color), -2px -2px 1px var(--section-par-text-color);
}
.sectionFive .serviceContainer .step h4 {
  font-family: var(--font-main-heading);
  width: fit-content;
  margin: 20px;
  transition: var(--default-transition-duration);
}
.sectionFive .serviceContainer .step h5 {
  font-family: var(--font-sub-heading);
  font-size: var(--main-subheader-size);
  opacity: 0;
  padding-left: 15px;
  font-size: 0px;
  white-space: nowrap;
}
@media screen and (max-width: 1200px) {
  .sectionFive .serviceContainer .step h5 {
    white-space: normal;
  }
}
.sectionFive .serviceContainer .step p {
  color: var(--white);
  font-weight: bolder;
  font-family: var(--pragraph-font);
  text-shadow: 3px 3px 6px var(--darker-blue-bg), -3px -3px 6px var(--darker-blue-bg);
  padding: 1rem;
  font-size: 0px;
  opacity: 0;
  transition: var(--default-transition-duration);
}
.sectionFive .serviceContainer .active {
  width: 100%;
  max-height: none;
  cursor: default;
}
.sectionFive .serviceContainer .active img {
  filter: brightness(0.5);
}
.sectionFive .serviceContainer .active h4, .sectionFive .serviceContainer .active h5, .sectionFive .serviceContainer .active p {
  cursor: default;
}
.sectionFive .serviceContainer .active h4 {
  text-shadow: 2px 2px 1px var(--white), -2px -2px 1px var(--white);
}
.sectionFive .serviceContainer .active h5 {
  opacity: 1;
  font-size: var(--main-subheader-size);
}
.sectionFive .serviceContainer .active p {
  font-size: var(--paragraph-size);
  opacity: 1;
  margin: 1rem 3em 0rem 3em;
  max-width: 400px;
}
@media screen and (max-width: 1000px) {
  .sectionFive .serviceContainer {
    flex-direction: column;
  }
  .sectionFive .serviceContainer .step {
    width: 100%;
    max-height: 75px;
    transition: var(--default-transition-duration);
  }
  .sectionFive .serviceContainer .step h4, .sectionFive .serviceContainer .step h5, .sectionFive .serviceContainer .step p {
    padding: 0px 5px 0px 8px;
  }
  .sectionFive .serviceContainer .step h4 {
    margin: 20px;
  }
  .sectionFive .serviceContainer .step h5 {
    opacity: 0;
    font-size: 0px;
    margin: 0.3rem;
  }
  .sectionFive .serviceContainer .step p {
    opacity: 0;
    font-size: var(--paragraph-size);
    margin: 0;
    max-width: none;
  }
  .sectionFive .serviceContainer .active {
    min-height: 70vh;
    max-height: none;
  }
  .sectionFive .serviceContainer .active h4 {
    text-shadow: 2px 2px 1px var(--white), -2px -2px 1px var(--white);
  }
  .sectionFive .serviceContainer .active h5 {
    opacity: 1;
    font-size: var(--main-subheader-size);
  }
  .sectionFive .serviceContainer .active p {
    opacity: 1;
    padding: 1rem;
    font-size: var(--paragraph-size);
  }
}

.sectionSix {
  width: 100%;
  min-height: 100vh;
  background-color: var(--darker-blue-bg);
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  align-items: center;
  background-image: url("/assets/grain.png");
}
@media screen and (max-width: 1000px) {
  .sectionSix {
    flex-direction: column-reverse;
  }
}
.sectionSix .contactUs {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  max-width: 800px;
}
.sectionSix .contactUs .formContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  .sectionSix .contactUs .formContainer {
    align-items: center;
  }
}
.sectionSix .contactUs .formContainer form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem;
  max-width: 550px;
  min-height: 685px;
  margin: 1rem;
  border-radius: 10px;
  box-shadow: 10px 10px 20px #091118;
  background-color: var(--darker-blue-bg);
  border: 2px solid var(--section-par-text-color);
}
@media screen and (max-width: 400px) {
  .sectionSix .contactUs .formContainer form {
    padding: 1rem;
  }
}
.sectionSix .contactUs .formContainer form label {
  color: var(--white);
  text-shadow: var(--par-text-shadow);
  font-family: var(--pragraph-font);
  font-size: var(--paragraph-size);
  user-select: none;
}
.sectionSix .contactUs .formContainer form input {
  width: 100%;
  background-color: var(--ligher-blue-bg);
  border: none;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--white);
  box-shadow: inset 1px 1px 8px 0px var(--black);
  font-family: var(--pragraph-font);
}
.sectionSix .contactUs .formContainer form input:placeholder-shown {
  font-family: var(--pragraph-font);
}
.sectionSix .contactUs .formContainer form textarea {
  box-shadow: inset 1px 1px 8px 0px var(--black);
  width: 100% !important;
  max-width: 100%;
  resize: vertical;
  min-height: 200px;
  max-height: 700px;
  background-color: var(--ligher-blue-bg);
  border: none;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--white);
  font-family: var(--pragraph-font);
}
.sectionSix .contactUs .formContainer form textarea:placeholder-shown {
  font-family: var(--pragraph-font);
}
.sectionSix .contactUs .formContainer form .submitFormButton {
  user-select: none;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-sub-heading);
  border: solid 2px var(--section-par-text-color);
  color: var(--section-par-text-color);
  background-color: var(--black);
  border-radius: 5px;
  padding: 3px 0px;
  transition: var(--default-transition-duration);
}
.sectionSix .contactUs .formContainer form .submitFormButton:hover {
  border: solid 2px var(--section-par-text-color);
  color: var(--black);
  background-color: var(--section-par-text-color);
}
.sectionSix .contactUs .conactUsText h4, .sectionSix .contactUs .conactUsText p {
  transition: var(--default-transition-duration);
  transform: translateY(50px);
  color: var(--darker-blue-bg);
  opacity: 0;
  user-select: none;
}
.sectionSix .contactUs .conactUsText h4 {
  text-shadow: var(--section-title-text-shadow);
  font-family: var(--font-sub-heading);
  font-size: var(--main-header-size);
  padding: 0rem 2rem 1rem 2rem;
}
.sectionSix .contactUs .conactUsText p {
  text-shadow: var(--par-text-shadow);
  font-family: var(--pragraph-font);
  font-size: var(--paragraph-size);
  padding: 0rem 2rem 2rem 2rem;
}
.sectionSix .contactUs .contactUsImgContainer {
  position: relative;
  overflow: hidden;
}
.sectionSix .contactUs .contactUsImgContainer .contactUsImg {
  position: absolute;
  width: 100%;
}
.sectionSix .contactUs .contactUsImgContainer .contactUsImgLayerOne {
  position: relative;
}

.footer {
  user-select: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding-bottom: 4rem;
  background-image: url("/assets/grain.png");
  background-color: var(--darker-blue-bg);
}
.footer div {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.footer div i {
  color: var(--section-par-text-color);
  font-size: 1.2rem;
}
.footer div p {
  font-size: var(--paragraph-size);
  transform: scale(1.2);
  font-family: var(--font-hand-writing);
  color: var(--section-par-text-color);
  text-shadow: var(--par-text-shadow);
}

.scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  height: 60px;
  width: 60px;
  transition: var(--default-transition-duration);
  cursor: pointer;
  opacity: 0;
}

.scrollToTop:hover {
  transform: translateY(-4px) scale(1.1);
}

/*# sourceMappingURL=/main.77bb5cfd.css.map */