@font-face {
  font-family: Geist;
  src: url(./GeistVariableVF.ttf);
}

body{
  --color-secondary: orange;
  --color-primary: #152B40;
} 

.col {
  display: flex;
  flex-direction: column;
}

.h-center {
  justify-content: center;
}

.v-center {
  align-items: center;
}


body {
  font-family: Geist;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
}

h2 {
  width: fit-content;
  border-bottom: 2px solid var(--color-secondary);
}

.hero-section {
  background-image: url('campfire.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* background-attachment: fixed; */
  height: 100vh;

  color: white;
  /* border-bottom: 1px solid orange; */
}

.header {
  height: 1em;
  /* background: red; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  max-width: 1140px;
  margin: auto;
}

.header .title {
  font-weight: 300;
  cursor: default;
}
.header .title.small {
  display: none;
}


@media (max-width: 1200px) {
  .header .title.big {
    display: none;
  }
  .header .title.small {
    display: inline-block;
  }
}

.header nav {
  display: flex;
  gap: 30px;
}

.header nav a {
  color: white;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  font-weight: 200;
  border-bottom: 1px solid transparent;
}

.header nav a:hover {
  /* text-decoration: underline; */
  border-bottom: 1px solid white;
}

.hero-section .hero {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
}

@media (max-width: 1200px) {
  .hero-section .hero {
    padding: 0 30px 0 30px;
  }
}


.hero-section .hero .title {
  margin: 0;
  font-size: 5em;
  font-weight: 300;
  line-height: 0.9em;
  margin-bottom: 30px;
  letter-spacing: -3px;
}

@media (max-width: 1200px) {
  .hero-section .hero .title {
    margin-left: -6px;
  }
}

.hero-section .hero .sub-title {
  margin: 0;
  font-size: 2em;
  font-weight: 300;
}


.feature-section {
  height: 100vh;
  /* background: #1B415E; */
  /* background: rgb(72,76,59);
  background: radial-gradient(at top, rgba(72,76,59,1) 0%, rgba(7,17,23,1) 85%); */
  color: white;
  padding: 30px;
  background: var(--color-primary);
}

@media (max-width: 1200px) {
  .feature-section {
    /* background: rgba(72,76,59,1); */
  }
}

.feature-section .work {
  width: 100%;
  max-width: 1140px;
  margin: auto;

  --xeno-box-width: min(700px, 65vw);
  --xeno-left-planet-width: min(300px, 30vw);
  --xeno-right-planet-width: min(200px, 20vw);
  --xeno-bottom-planet-width: min(100px, 10vw);

}

.feature-section .work .xeno-work {
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
}

.feature-section .work .xeno-box {
  display: flex;
  margin: 40px auto;
  width: var(--xeno-box-width);
  min-height: 300px;
  background: green;
  padding: 20px;
  border-radius: 35px;
  z-index: 2;
  justify-content: flex-start;
  flex-direction: column;
  gap: 30px;
  box-shadow: 0 0 21px var(--color-primary);

}

.feature-section .work .xeno-box span{
  width: 84%;
}

.feature-section .work .xeno-work .xeno-left-planet {
  content: '';
  background: red;
  z-index: 1;
  height: var(--xeno-left-planet-width);
  margin-right: calc(-1 * var(--xeno-left-planet-width));
  width: var(--xeno-left-planet-width);
  border-radius: 100%;
  position: absolute;
  left: 3%;
  margin-top: 154px;
}

.feature-section .work .xeno-work .xeno-right-planet {
  content: '';
  background: blue;
  z-index: 3;
  height: var(--xeno-right-planet-width);
  margin-right: calc(-1 * var(--xeno-right-planet-width));
  width: var(--xeno-right-planet-width);
  border-radius: 100%;
  position: absolute;
  /* position: relative; */
  left: calc(5vw + var(--xeno-box-width) + 30px);
  right: 18vw;
  margin-top: -192px;
  box-shadow: 0 0 21px var(--color-primary);
}

.feature-section .work .xeno-work .xeno-bottom-planet {
  content: '';
  background: orange;
  z-index: 3;
  height: var(--xeno-bottom-planet-width);
  margin-right: calc(-1 * var(--xeno-bottom-planet-width));
  width: var(--xeno-bottom-planet-width);
  border-radius: 100%;
  position: absolute;
  left: 54%;
  bottom: 10px;
  margin-top: 154px;
  box-shadow: 0 0 21px var(--color-primary);
}