@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap&family=Cherry+Bomb+One&family=Foldit:wght@600&family=IBM+Plex+Mono&family=Inter&family=Monoton&family=Nunito&family=Open+Sans&family=Plaster&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,300;0,500;1,100&family=Roboto&family=Roboto+Mono&display=swap?family=Urbanist:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap&family=Tilt+Neon&display=swap?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap?');
:root {
  --matteBlack:#222222;
  --mintGreen:#3EB489;
  --matteRed:#B33F40;
  --softGreen:#9ad1bd;
  --offWhite:#fffdfa;
  --softWhite:#f1f0ed;
  --cream:#e8e0d6;
  --lightblue:#64aef2;
  --clear:#00000000;
  --deepBlue:#021f3a;
  --contrastBlack:#010409;
  --charcoalGrey:#7a828e;
  --softBlack:#242222;
  --offWhiteTrans:#fffdfa50;
  --matteBlackTrans: #22222233;
  --accountingGrey:#cccccc;
  --neumorphBG_light:#fffdfa20;
  --neumorphBG_dark:#22222220;
  --lightBlackTrans: #63605c50;
  --medBlack: #444444;
  --medTextGrey: #555555;
  --neumorphGradient:linear-gradient(145deg, #ffffff, #e6e4e1);
  --legradient:linear-gradient(45deg, #fffdfa, #cccccc);
  --neumorphShadow:41px 41px 60px #d9d7d5, -41px -41px 60px #ffffff;
  --transBlack: #1f1f1f90;
  --greyTrans: #cccccc50;
  --offWhiteLucent: #fffdfa90;
  --matteBlackLucent: #22222280;
  --greyLucent: #cccccc80;
  --hallBlue:#00A3E0;
  --arkitechBlue: #003E51;
  --arkitechBlueTrans: #003E5150;
  --BadOrange: #E9C66D;
  --BadOrangeTrans: #E9C66D99;
  --badMatteBlack: #2f2f2f;
  --midBlack: #1d1b1b;
  --BadPink: #EA9692;
  --BadPinkTrans: #EA969299;
  --BadBlue:#a1c5ff;
  --BadBlueTrans:#a1c5ff50;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  text-align: center;
  color:var(--matteBlack);
  background-color: var(--offWhite);
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-align: start;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -1px;
  scroll-margin: 80px;
}
section {
  scroll-margin: 80px;
}
#header {
  padding: 12px 24px;
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: auto;
  width: 90%;
  position: fixed;
  margin: 0 auto;
  left: 0px;
  right: 0px;
  top: 4px;
  background-color: var(--offWhiteTrans);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0px 0px 12px var(--matteBlackTrans);
  z-index: 101;
  font-family: 'Poppins', sans-serif;
  letter-spacing:-0.025rem;
  overflow:hidden;
  color: var(--offWhite);
  transition: all ease-out 0.12s;
  border-radius: 64px;
}

#header svg {
  height: 36px;
  width: 36px;
  cursor: pointer;
  padding: 0px;
}

#header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: var(--matteBlack);
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.logoContainer {
  font-size: 18px;
  text-decoration: none;
  color: var(--matteBlack);
  font-weight: 500;
}
#titleheader {
  position: relative;
  z-index: 10;
  font-size: 48px;
  top: 48px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: var(--offWhite);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0px 0px 2px var(--accountingGrey);
  text-align: center;
  letter-spacing: -1px;
  width: 100%;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#header li {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--matteBlack);
  border-bottom: 1px solid var(--clear);
  border-left: 1px solid var(--clear);
  transition: all ease 0.2s;
}
#header li p {
position: relative;
border-radius: 64px;
font-size: 12px;
font-weight: 700;
background-color: var(--hallBlue);
}
#header a {
  text-decoration: none;
}
#header img {
  height: 84px;
  transition: all ease-out 0.12s;
}

#header li:hover {
  border-bottom: 1px solid var(--matteBlack);
  border-radius: 0px;
}
#mobile_menu {
  display: none;
  fill: var(--offWhite);
  padding: 0px;
  align-items: center;
}
#mobile_popup {
  position: fixed;
  padding: 8px;
  padding-top: 92px !important;
  height: 100vh;
  top: 0px;
  width: 100%;
  transform: translate(120%, 0%);
  margin: 0 auto;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background-color: var(--offWhiteTrans);
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  z-index: 99;
  transition: all ease-out 0.32s;
}
#mobile_popup a {
  text-decoration: none;
  color: var(--badMatteBlack);
  font-size: 32px;
  transition: all ease-out 0.2s;
}

#mobile_popup a:hover {
  text-decoration: underline;
}
#hero img {
  position: absolute;
  height: auto;
  object-fit: cover;
  
}
#hero {
  height: 80vh;
  position: relative;
  display: flex;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  background-image: url("graphics/22A76B1A-72FF-4D51-8B88-077C8DA99D32.jpg");
  background-size: cover;
  background-position: 0% 50%;
}
footer {
  position:relative;
  width: 100%;
  bottom: 0px;
  background-color: var(--matteBlack);
  color: var(--charcoalGrey);
  height: auto;
  margin-top: 0px;
}
.linkskies {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: top;
  position: relative;
  margin-right: 12px;
  height: 80%;
}
.linkskies a {
  text-decoration: none;
  color: var(--offWhite);
  padding: 2px 4px;
  border-radius: 4px;
  text-align: center;
  align-items: center;
  margin-right: 4px;
  transition: all ease-out 0.12s;
  background: linear-gradient(135deg, var(--clear), var(--clear));
}
.linkskies a svg {
  fill: var(--accountingGrey);
}
.linkskies a:hover svg{
  fill: var(--offWhite);
}
#heroContent {
  display: flex;
  position: relative;
  top: 72px;
  padding: 6px 24px;
  padding-top: 0px;
  height: fit-content;
  -webkit-height: fit-content;
  left: 72px;
  flex-direction: column;
  justify-content: left;
  gap: 24px;
  text-align: left;
  border-radius: 24px;
}
#heroContent h1 {
  text-align: left;
  align-self: left;
  width: 100%;
  font-size: 64px;
  color: var(--offWhite);
  margin: 0;
}
#heroContent p {
  font-size: 24px;
  color: var(--offWhite);
  margin: 0;
}
#cta_banner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: calc(100% - 24px);
  height: 20vh;
  justify-content: space-between;
  text-align: left;
  overflow: hidden;
  background-color: var(--matteBlack);
  padding: 0px 12px;
  max-height: 200px;
  align-items: center;
}
#cta_banner img {
  position: relative;
  top: 20%;
  height: 100%;
}
#cta_banner h5 {
  font-size: 64px;
  margin: 0;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  color: var(--offWhite);
}
#cta_banner p {
  font-size: 48px;
  margin: 0;
}
#cta_banner a {
  text-decoration: none;
  color: var(--offWhite);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--accountingGrey);
  font-size: 18px;
  font-weight: 500;
  background-color: var(--greyTrans);
  padding: 12px;
  border-radius: 8px;
  transition: all ease-out 0.12s;
  height: fit-content;
  -webkit-height:fit-content;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}
#cta_banner a:hover {
  box-shadow: 0px 0px 12px 0px var(--matteBlackTrans);
  background-color: var(--offWhiteTrans);
}
#heroContent a:hover {
  box-shadow: 0px 0px 12px 0px var(--matteBlackTrans);
  background-color: var(--offWhiteTrans);
}
#heroContent a {
  text-decoration: none;
  color: var(--offWhite);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  margin: 0 auto;
  width: calc(100% - 24px);
  text-align: center;
  background-color: #cccccc10;
  padding: 12px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  border: 1px solid var(--accountingGrey);
  font-size: 20px;
  font-weight: 100;
  transition: all ease-out 0.12s;
  cursor: pointer;
}
#solutions {
  height: auto;
  min-height: 600px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 72px;
  background: var(--arkitechBlue);
  justify-content: space-around;
  transition: all ease-out 0.12s;
  gap: 0px 6px;
}
.solution-preview {
  z-index: 1;
  transition: all ease-out 0.12s;
}
.solution-preview h2 {
  color: var(--offWhite);
  font-size: 32px;
  font-weight: 500;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  transition: all ease-out 0.12s;
}
.solution-content {
  z-index: 1;
  display: none;
  transition: all ease-out 0.12s;
}
.solution-item {
  height: 400px;
  width: 20%;
  border: 1px solid var(--accountingGrey);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  transition: all ease-out 0.24s;
  justify-content: center;
}
.solution-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
  position: absolute;
  filter: blur(8px);
  opacity: 0.5;
  transition: all ease-out 0.12s;
  top: 0px;
}
.solution-item:hover {
  box-shadow: 0px 0px 12px 0px var(--matteBlackTrans);
  width: 33.33%;
  justify-content: start;
  align-items: center;
}
.solution-item:hover img {
  opacity: 0.66;
  filter: none;
  height: 100%;
  top: 72px;
}
.solution-item:hover .solution-preview {
  border-bottom: 1px solid var(--accountingGrey);
  text-align: left;
  height: 72px;
  padding: 0px 12px;
  align-items: center;
  width: calc(100% - 24px);
}
.solution-item:hover .solution-preview h2 {
  height: 100%;
  width: 100%;
  align-items: center;
  display: flex;
}
.solution-item:hover .solution-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.solution-item:hover .solution-content p {
  font-size: 24px;
  font-family: 'DM Sans', sans-serif;
  width: 66.67%;
  color: var(--offWhite);
  text-align: left;
}
.solution-item .solution-content a {
  transform: translateY(200%);
  opacity: 0;
  border-radius: 4px;
  font-size: 24px;
  padding: 6px 12px;
  text-decoration: none;
  background-color: var(--arkitechBlue);
  box-shadow: 0px 4px 8px 0px var(--matteBlackTrans);
  color: var(--offWhite);
  cursor: pointer;
  animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,200%);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
.solution-item:hover .solution-content a {
  opacity: 1;
  transform: translateY(0);
}
.s-4 img {
  transform: scaleX(-1);
}

/* PROCEss */
#process {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  padding: 32px;
  margin: 0 auto;
}
#process h2 {
  width: 100%;
  font-size: 48px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  text-align: left;
}
.process-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.process-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 6px;
  padding: 12px;
}
.process-content h5 {
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin: 0;
  text-align: left;
  width: 100%;
  color: var(--matteBlack);
  padding: 0;
}
.process-content p {
  font-size: 18px;
  font-family: 'DM Sans', sans-serif;
  margin: 0;
  color: var(--medTextGrey);
}
.process-item img {
  top: 32px;
  position: relative;
  width: 33.33%;
  height: auto;
}


/* ABOUT */
#about {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#about h2 {
  width: 100%;
  font-size: 48px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  margin-bottom: 24px;
  text-align: center;
}

#aboutContent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1600px;
}
#aboutWho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 40%;
  gap: 42px;
}
#aboutWho img {
  border-radius: 24px;
  width: 100%;
  height: auto;
  box-shadow: inset -4px -4px 8px 0px #C3C1B350, inset 4px 4px 8px 0px #1a1a1a50;
}
#aboutWho div h6 {
  font-size: 24px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  text-align: center;
  color: var(--matteBlack);
}
#aboutWho div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 12px;
  align-items: center;
  width: calc(100% - 24px);
  box-shadow: 20px 20px 60px 0px #d9d7d5, -20px -20px 60px 0px #ffffff;
  border-radius: 24px;
}
#aboutWho div p {
  color: var(--medTextGrey);
}
#aboutDesc {
  width: 40%;
  padding: 2%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: top;
  gap: 12px;
}
#aboutDesc h5 {
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  font-size: 48px;
  margin: 0;
  padding: 0;
}
#aboutDesc p {
  margin: 0;
  font-size: 18px;
  color: var(--medTextGrey);
}
#socialLinks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
  margin-top: 64px;
}
#socialLinks a  {
  height: 42px;
  width: 42px;
}
#socialLinks a svg {
  height: 100%;
  width: auto;
}
#socialLinks a svg path {
  stroke: var(--medTextGrey)
}

/* CONTACT */
#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 72px;
}
#contactContent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  max-width: 1600px;
  align-items: center;
}
#contact h2 {
  width: 100%;
  font-size: 48px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  margin-bottom: 24px;
  text-align: center;
}
#contactContent div div input {
  border: 1px solid var(--accountingGrey);
  background-color: #cccccc10;
  padding: 8px 4px;
  border-radius: 8px;
  width: 100%;
  height: 32px;
}
#contactContent div div {
  box-shadow: 20px 20px 60px 0px #d9d7d5, -20px -20px 60px 0px #ffffff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 24px;
  width: 100%;
}
#contactContent div {
  width: 40%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
#contactContent div a {
  margin-top: 12px;
  position: relative;
  border: 1px solid var(--matteBlack);
  color: var(--matteBlack);
  font-size: 18px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  padding: 8px 16px;
  border-radius: 8px;
}

/* FOOTER */
footer {
  position:relative;
  width: 100%;
  bottom: 0px;
  background:var(--matteBlack);
  color: var(--accountingGrey);
  height: auto;
  margin-top:64px;
}
footer img {
  width: 200px;
}
#topInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 18px;
  padding: 12px;
  position: relative;
  top: 48px;
  margin: 0 auto;
  width: 90%;
}
#topInfo h2 {
  font-size: 48px;
  font-weight: 400;
  margin: 0 !important;
  padding: 0 !important;
}
#topInfo a {
  text-decoration: none;
  color: var(--accountingGrey);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
}
#topInfo a svg {
  width: 24px;
  fill: var(--accountingGrey);
}
#topInfo div {
  max-width: 350px;
}
#topInfo h5 {
  font-weight: 700;
  margin: 0;
  font-size: 24px;
}
#bottomInfo {
  display: flex;
  flex-direction: row;
  width: 95%;
  padding: 12px;
  margin-top: 100px;
  position: relative;
  justify-content: space-between;
  height: auto;
}
#bottomInfo div {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
#bottomInfo a {
  text-decoration: none;
  color: var(--accountingGrey);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
}

#contentArea {
  margin-top: 120px;
  padding: 24px;
  color: var(--accountingGrey);
}
@media(max-width: 1000px) {
  #header {
    width: 85%;
  }
  
  #header #navLinks {
    display: none;
  }
    #topInfo {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      padding: 8px;
      position: relative;
      top: 32px;
      margin: 0 auto;
      width: 90%;
      text-align: center;
      align-items: center;
    }
    #topInfo a {
      gap: 6px;
      font-size: 12px;
    }
    #topInfo p {
      font-size: 12px;
    }
    #topInfo a svg {
      width: 18px;
    }

    #topInfo h5 {
      font-size: 18px;
    }
    #bottomInfo {
      display: flex;
      flex-direction: row;
      width: 95%;
      padding: 12px;
      margin-top: 64px;
      position: relative;
      justify-content: space-between;
      height: auto;
      font-size: 12px;
    }

    #topInfo img {
      width: 120px;
    }

    #contentArea {
      margin-top: 96px;
      padding: 8px;
      color: var(--matteBlack);
    }
 

    
  #header svg {
    width: 24px;
    height: 24px;
  }
  #mobile_menu {
      display: flex;
      fill: var(--badMatteBlack);
  }

  /* mobile bento */
  .solution-item {
    width: 45%;
    margin-bottom: 24px;
    height: 300px;
  }
  .solution-preview h2 {
    font-size: 20px;
  }
  .solution-item:hover .solution-content p {
    font-size: 16px;
  }
  .solution-item:hover .solution-content a {
    font-size: 12px;
  }
  .solution-item:hover img {
    height: 100%;
  }
  #heroContent {
    left: 12px;
  }


  /* cta banner */
  #cta_banner {
    z-index: 0;
  }
  #cta_banner img {
    position: absolute;
    height: auto;
    display: none;
  }
  #cta_banner h5 {
    font-size: 32px;
  }
  #cta_banner p {
    font-size: 24px;
  }
  #cta_banner a {
    font-size: 14px;
    padding: 4px 8px;
    text-align: center;
    justify-content: center;
  }

  /* solutions */
  #solutions {
    z-index: 2;
  }

  /* process */
  #process h2 {
    font-size: 36px;
  }
  .process-content h5 {
    font-size: 20px;
  }
  .process-content p {
    font-size: 14px;
  }

  /* ABOUT */
  #about h2 {
    font-size: 36px;
  }
  #about {
    flex-direction: column;
  }
  #aboutContent {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  #aboutWho {
    width: 90%;
  }
  #aboutWho img {
    max-width: 600px;
  }
  #aboutDesc {
    width: 90%;
  }
  #contact img {
    display: none;
  }
  
}