* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
body {
  font-family: 'Arial', sans-serif;
  color: white;
  background-color: black;
  animation: fadeInAnimation ease 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }

  @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Hide scrollbar */
html {
  scroll-behavior: smooth;
  font-size: 12px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
html::-webkit-scrollbar { 
  width: 0px; /* Chrome, Safari, Opera*/
}

/* LANDING SECTION */
#landing {
  position: fixed;
  width: 100%;
  height: 100vh; /* Full viewport height */
  top: 0;
  left: 0;
}

.content-below {
  margin-top: 120vh; /* Ensure there's space for the landing content */
  position: relative;
}

.landing {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

.landing img {
  animation: fadeInAnimation ease 6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  height: 7em;
  margin-bottom: 7em;
}

.landing-text-heading {
  display: block;
  justify-content: center;
  position: absolute;
  width: 100%;
  margin: auto 0;
  color: #fff;
  text-align: center;
  bottom: calc(33% - 1em);
}

.landing-text-subheading {
  animation: fadeInAnimation ease 6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  color: #686868;
}

@media (min-width: 1921px) {
  .landing-text-heading {
    bottom: calc(38% - 1em);
  }
}

.landing-contact {
  animation: fadeInAnimation ease 7s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  position: relative;
  margin: 0em 3em 0em 3em;
  display: inline-block;
  cursor: pointer;
}

.landing-contact h5 {
  color: #686868;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
    color: inherit;
}

.landing-work {
  animation: fadeInAnimation ease 8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: inline-block;
  align-items: center;
  text-align: center;
  position: absolute;
  text-transform: uppercase;
  margin: 0 auto;
  height: 5%;
  bottom: 0px;
}

.landing-work p {
  color: #686868;
  font-size: 0.65em;
}

.landing-contact::before {
  content: '';
  position: absolute;
  width: 100%; /* Cover the full width of the parent element */
  height: 20%; /* Cover the full height of the parent element */
  background-color: #decb23;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  bottom: 5%;
  left: 0;
  transform: scale(1.05); /* Slightly enlarges the rectangle; adjust as needed */
}

.landing-contact:hover::before {
  opacity: 1;
}

/* Container style for centering content */
.centered-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; /* Ensure text within the div is centered */
}

/* Style for the hidden content */
.hidden-content {
  max-width: 30em; /* Limiting width as specified */
  overflow: hidden;
  max-height: 0; /* Start with no content visible */
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition */
  opacity: 0;
  width: 100%; /* Ensure width takes the full parent width for centering text */
  padding: 2px;
  color: #686868;
}

/* Style when content is visible */
.show-content {
  max-height: 20em; /* Large enough max-height to accommodate content */
  opacity: 1; /* Make content fully opaque */
  margin: 2px 0px 10px 0px;
}


/* PORTFOLIO SECTIONS */

.parallax-section {
  position: relative;
  height: 100vh;
  margin-top: 10em;
}

.parallax-image {
  z-index: 2;
  width: 80vh;
  position: absolute;
  left: 40%;
  opacity: 0;
  cursor: pointer;
}

.parallax-image-container {
  transition: transform .4s;
}

.parallax-image-container:hover {
  transform: scale(1.03);
}

.text-container {
  position: absolute;
  left: 22%; /* Adjust as needed */
  top: 7%; /* Adjust as needed */
  text-align: left;
  transform: translateX(50px); /* Initial translation for animation */
  opacity: 0; /* Initial opacity for animation */
}

.huckit-icon {
  margin-top: 2em;
  width: 5em;
  left: 0;
}

.dgmf-icon {
  margin-top: 2.5em;
  width: 4em;
  left: 0;
}

.fullyKnown-icon {
  margin-top: 2em;
  width: 4.5em;
  left: 0;
}

.rfp-icon {
  margin-top: 1.6em;
  width: 3.7em;
  left: 0;
}

.rootsRR-icon {
  margin-top: 2.2em;
  width: 4em;
  left: 0;
}

.rumble-icon {
  margin-top: 2.5em;
  width: 3.7em;
  left: 0;
}

.parallax-title {
  color: white;
  font-size: 5em; /* Large size for visibility */
  line-height: 0.9;
  margin-bottom: 0.4em; /* Space between title and subtitle */
}

.parallax-subtitle {
  color: #686868; /* Slightly lighter color for contrast */
  font-size: 2em; /* Smaller size than the title */
  line-height: 1em;
}

.parallax-link {
  margin-top: 2em;
  color: #fff;
  font-size: 1em;
  line-height: 1em;
}

.parallax-link:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color:#decb23;
}

.vertical-line {
  border-left: 1px solid #282828;  /* Adjust the color as needed */
  height: 12em;                 /* Adjust the height as needed */
  display: inline-block;
  margin-left: 20px;
  margin-top: 1.5em;
}

.back-to-top {
  color: #fff;
  margin-top: 8em;
  text-align: center;
  height: 14vh;
}

.back-to-top img {
  height: 3em;
  margin-top: 0.5em;
  cursor: pointer;
}

.back-to-top h3 {
  cursor: pointer;
}

#btt-text, #btt-image {
  cursor: pointer; /* Makes the mouse cursor a pointer when hovered over the elements */
  outline: none; /* Removes the default focus outline to be replaced with a custom one if desired */
}

@media (max-width: 768px) {
  .parallax-title {
    visibility: hidden;
  }
}

@media (max-width: 768px) {
  .parallax-subtitle {
    visibility: hidden;
  }
}

#project-landing {
  z-index: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.project-landing {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  width: 100vw;
  padding: 0;
}

.to-home {
  z-index: 2;
  display: inline-block;
  cursor: pointer;
  position: fixed;
  left: 2%;
  top: 6%;
  animation: fadeInAnimation ease 7s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  margin: 0em 3em 0em 3em;
  display: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  color: #686868;
}

.to-home::before {
  content: '';
  position: absolute;
  width: 100%; /* Cover the full width of the parent element */
  height: 20%; /* Cover the full height of the parent element */
  background-color: #decb23;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  bottom: 5%;
  left: 0;
  transform: scale(1.05); /* Slightly enlarges the rectangle; adjust as needed */
}

.to-home:hover::before {
  opacity: 1;
}

.project-text-heading {
  display: block;
  justify-content: center;
  position: absolute;
  width: 100%;
  margin: auto 0;
  color: #fff;
  text-align: center;
  bottom: calc(40% - 1em);
}

.project-text-heading h1 {
  font-size: 9em;
}

.project-text-subheading {
  font-size: 2.5em;
  margin-top: 0.5em;
  animation: fadeInAnimation ease 6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  color: #686868;
}

.project-landing img {
  animation: fadeInAnimation ease 6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  height: 8em;
  margin-bottom: 3em;
}

.images-below {
  background-color: #000000;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin-top: 120vh; /* Ensure there's space for the landing content */
}

.flex-container {
  background-color: #000000;
  position: relative;
  height: 100vh;
  margin-top: 10em;
  display: flex;
  width: 100%;
  justify-content: center; /* Centers children horizontally */
  flex-wrap: wrap; /* Allows multiple rows if necessary */
  align-items: center; /* Align items vertically */
  margin: 0 auto; /* Horizontal centering */
  }

.flex {
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 60%;
  flex-wrap: wrap;
}

.flex-container img {
  align-items: center;
  max-width: 100%; /* Ensure images do not exceed their containers */
  height: auto; /* Maintain aspect ratio */
}

.cover-adjust {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TEXT STYLING */
h1 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 4em;
  line-height: 1em;
  text-transform: uppercase;
}

h2 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 3.5em;
  text-transform: uppercase;
  line-height: 1.1em;
}

h3 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5em;
  text-transform: uppercase;
  line-height: 0.9em;
}

h4 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3em;
  text-transform: uppercase;
}

h5 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  text-transform: uppercase;
}

p {
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
}



/* MEDIA QUERIES */

@media (max-width: 1024px) {
  .text-container {
    display: none;  /* Hides the text container on smaller screens */
  }
}

@media (min-width: 1921px) {
  html {
    font-size: 14px; /* Increases base font size for larger screens */
  }
}

/* Standard desktops */
@media (min-width: 1280px) and (max-width: 1920px) {
  html {
    font-size: 12px; /* Keeps base font size for standard desktop screens */
  }
}

/* Smaller devices like tablets */
@media (max-width: 1279px) {
  html {
    font-size: 11px; /* Slightly decreases base font size for smaller devices */
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  html {
    flex-direction: column;
    font-size: 10px; /* Further decreases base font size for mobile screens */
  }
}

/* Very small devices */
@media (max-width: 480px) {
  html {
    flex-direction: column;
    font-size: 7px; /* Adjusts base font size for very small devices */
  }
}

.image-container {
  display: none;
}


/* Media query for devices with a width of 768px up to 1024px (common iPad widths in portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .large-screen {
      display: none; /* Hide current layout on iPads */
  }

  .landing-text-heading {
    bottom: calc(46% - 1em);
    scale: 1.6;
  }

  .landing-work {
    height: 10%;
    scale: 1.6;
  }

  .image-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 80%; /* iPad-specific width */
      margin: 0 auto;
      margin-bottom: 200px;
  }

  .back-to-top {
    bottom: 0;
  }

  .image-container img {
      width: auto; /* Maintain original image size */
      max-width: 100%; /* Ensures images do not overflow their container */
      margin: 35px 0; /* More space between images */
  }
}

/* Media query for devices smaller than 768px (smartphones) */
@media only screen and (max-width: 767px) {
  .large-screen {
      display: none; /* Hide current layout on smaller devices */
  }

  .landing-text-heading {
    bottom: calc(40% - 1em);
    scale: 1.5;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    width: 50%;
  }

  .landing-text-heading h1 {
    line-height: 25px;
    margin-bottom: 5px;
  }

  .landing-text-heading h2 {
    line-height: 22.5px;
  }

  .landing-work {
    height: 10%;
    scale: 1.5;
  }

  .image-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90%; /* Smaller devices width */
      margin: 0 auto;
      margin-bottom: 50px;
  }

  .image-container img {
      width: 100%; /* Images fill the container */
      height: auto; /* Maintain aspect ratio */
      margin: 10px 0; /* Standard space between images */
  }
}


/* Media query for devices with a width of 768px up to 1024px (common iPad widths in portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  .project-text-heading {
    bottom: calc(45% - 1em);
  }

  .flex-container {
      align-items: center;
      width: 80%; /* iPad-specific width */
      margin: 0 auto;
      margin-bottom: 200px;
  }
}

/* Media query for devices smaller than 768px (smartphones) */
@media only screen and (max-width: 767px) {

  .project-text-heading {
    bottom: calc(43% - 1em);
    flex-direction: column;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    width: 60%;
  }

  .flex-container {
    align-items: center;
    width: 85%; /* iPad-specific width */
    margin: 0 auto;
    margin-bottom: 200px;
}

}