.content-item {
  width: 100%;
  margin-bottom: 50dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title-bar {
  /* border: 2px solid white; */
  height: fit-content;
  width: 90%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 10dvh;
}

.title-item {
  /* width: 40%; */
  /* border: 2px solid white; */
  font-weight: 900;
  font-size: 3dvh;
  color: #435680;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  /* text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; */
  /* align-items: center; */
  /* justify-content: flex-end; */
}

.grad-text {
  font-weight: 650;
  display: block;
  font-size: 8dvh;
  color: #e9f4f7;
  text-shadow: none;
}

.sublime-text {
  display: block;
  font-size: 6dvh;
  font-weight: 650;
  color: #77d4e4;
  margin-bottom: 3dvh;
  text-shadow: none;
}

.para {
  font-weight: 200;
  display: flex;
  width: 70%;
  font-size: 2dvh;
  text-shadow: none;
}

.land-msg {
  width: 60%;
}

.seperator {
  width: 5%;
}
.ref-img {
  height: 50dvh;
  width: 35%;
  /* border: 2px solid #435680; */
  background-image: url('../assets/tech-stack.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  opacity: 0;
}

@media (max-width: 775px) {
  .title-bar {
    flex-direction: column;
  }
  .title-item {
    width: 100%;
  }
}

.ref-btn {
  font-weight: 900;
  text-decoration: wavy;
  margin-top: 2dvh;
  width: 20%;
  height: 4dvh;
  border-radius: 8px;
  border: 2px solid #77d4e4;
  color: #77d4e4;
  background-color: #0b0e22;
}

#nav-area-1 {
  scroll-margin-top: 100px;
}

#nav-area-4 {
  scroll-margin-top: 100px;
  width: 100%;
}