* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  position: relative;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #000;

  /* Only works if there is nothing absolutely positioned in relation to body */
  overflow-x: hidden;
}

h1 {
  font-weight: 300;
  font-size: 4.4rem;
  line-height: 4.4rem;
  /* or 100% */

  color: #fff;
}

p {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 29px;
  /* or 144% */

  color: #000000;
}

.btn {
  text-decoration: none;
  padding: 1.2rem 0;

  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.4rem;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  height: 4.8rem;
  width: 100%;
}

.btn--full {
  background-color: #fff;
  color: #000;
  border-radius: 8rem;
  margin-bottom: 1.2rem;
}

.btn--frame {
  border: 1px solid #fff;
  color: #fff;
  border-radius: 8rem;
}

/*********** Nav bar **********/

.header {
  position: fixed;
  top: 0rem;
  /* right: auto; */
  left: 0%;
  /* transform: translateX(-50%); */
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* height: 6.4rem; */
  width: 100%;
  /* max-width: 23.75rem; */
  color: #000;
  transition: all 0.25s ease 0s;
  background-color: #000;
  padding: 0 3.2rem;
  margin: 0 auto;

  /* display: none; */
}

nav {
  height: 80%;
}

.logo-header {
  height: 100%;
}

h2 {
  font-size: 4.4rem;
  font-weight: 500;
  color: #000;
  text-transform: uppercase;
}

.footer {
  position: relative;
  background-color: #000;
  padding: 5.6rem 2rem 6.4rem 2rem;
}

.goup-icon {
  position: absolute;
  top: 0;
  right: 4.8rem;
  transform: translateY(-50%);
}

.footer-txt-container {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-heading {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  /* or 137% */
  text-transform: uppercase;

  color: #ffffff;
}

.footer-logo {
  width: 8rem;
}

.callus {
  font-weight: 300;
  font-size: 3.2rem;
  line-height: 4.4rem;
  /* or 139% */
  text-transform: uppercase;

  color: #ffffff;
  width: 26.8rem;
}

.callus-top {
  font-size: 1.6rem;
}

.contactus {
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 4.4rem;
  /* or 135% */

  color: #ffffff;
  /* padding-bottom: 2.4rem; */

  text-transform: uppercase;
}

.email {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.4rem;
  /* or 141% */

  text-decoration-line: underline;

  color: #fff;
}

.copy-container {
  display: flex;
  gap: 3.4rem;
}

.copy {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2rem;
  /* identical to box height, or 200% */

  color: rgba(255, 255, 255, 0.603);
  margin-top: 7.2rem;
}

.scrollFade {
  opacity: 1;
  pointer-events: all;
}
.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10%);
}
.scrollFade-work--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(50%);
}
.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.scrollFade--animate {
  transition: all 800ms ease-in;
}