.nav-contents {
  max-width:1200px;
  margin:0 auto;
  padding:25px 0px;
  display:flex;
  align-items:center;
}

.panel {
  max-width: 1200px;
  margin: 0 auto;
}

.logo-panel {
  flex: 1;
  margin-right: 40px;
}

.logo {
  height:30px;
  vertical-align:top;
}

.logo-link {
  display: inline-block;
}

/* .icon-link {
  display: none;
} */

.nav-items {
  display:flex;
  align-items:center;
  font-weight:500;
  width: 100%;
}

.header {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 93px;
  letter-spacing: 0px;
  line-height: 0.96;
  margin: 200px auto 0 auto;
  max-width: 100%;
  /* text-align: center; */
}

.sub-header {
  font-family: 'Inter';
  font-size: 20px;
  font-weight:500;
  /* text-align:center; */
  color: #1C1C1C;
  margin-top:37px;
}

.top-buttons-wrapper {
  display:flex;
  margin: 48px auto 0 auto;
  /* justify-content:center; */
}

.top-button {
  padding:8px 14px;
  border-radius:12px;
  font-size:19px;
  font-weight:600;
  text-align: center;
}

.top-button-margin {
  margin-right:15px;
}

.top-button-clear {
  border: 1px solid #CECECE;
}

.preview-image {
  max-width:100%;
  min-height:250px;
  display:block;
  margin:117px auto 0px auto;
}

.section-title {
  font-family: 'Inter';
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height:70px;
}

.section-wrapper-flex {
  display:flex;
  margin-top:127px;
}

.section-text {
  margin-right:67px;
}

.analogy-image {
  max-width:100%;
  display:flex;
  margin: 92px auto 0px auto;
}

.problem-image {
  max-width:100%;
  display:block;
  margin:52px auto 0px auto;
}

.stats-image {
  max-width:100%;
  display:block;
  margin:95px auto 0px auto;
  height: 120px;
}

.section-title-sm {
  font-size:60px;
  font-weight:700;
}

.testnet-stats {
  flex:5;
  text-align:center;
  margin-top:60px;
  font-family: canada-type-gibson;
  font-style: normal;
  font-weight: 600;
}

.section-wrapper-block {
  margin-top:77px;
}

.roadmap-items {
  display:flex;
  margin-top:55px;
  flex-wrap:wrap;
}

.roadmap-item {
  flex:1;
  min-width:240px;
  margin-bottom:50px;
}

.footer {
  border-top:1px solid #DEDEDE;
  margin-top:140px;
}

.footer-panel {
  max-width: 1200px;
  margin: 0px auto;
  padding: 46px 20px;
  display: flex;
  flex-direction: row;
  align-items:center;
}

.footer-links {
  display:flex;
  align-items:center;
  font-weight:600;
}

.footer-link {
  margin-right:40px;
  color:#2462BC;
  text-decoration:none;
}

.sub-header-highlight {
  color: #E7470A;
  font-weight: 800;
}

.partners-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 158px;
  border-bottom: 1px solid #eaeaea;
}

.avalanche-beta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 158px;
  margin-left: 68px;
  border-bottom: 1px solid #eaeaea;
}

.partners-image {
  height: 48px;
}

.partners-list {
  display: flex;
  margin-top: 32px;
  justify-content: space-between;
  width: 100%;
}

.about-musing-panel {
  padding: 96px 158px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.roadmap-panel {
  padding: 96px 0;
  display: flex;
  flex-direction: column;
}

.hero-line-pattern-1 {
  position: absolute;
  top: 194px;
}

.hero-line-pattern-2 {
  position: absolute;
  bottom: -60px;
  right: 0;
}

.line-pattern-right {
  position: absolute;
  bottom: -120px;
  right: -120px;
}

.line-pattern-left {
  position: absolute;
  bottom: -120px;
  left: -100px;
}

.the-problem-panel {
  padding: 146px 158px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features-panel {
  margin: 0 158px;
  padding: 32px;
  display: flex;
  /* gap: 96px; */
  border-radius: 25px;
  box-shadow: 0 23px 44px -4px rgba(176, 183, 195, 0.14);
}

.features-panel-2 {
  margin: 80px 158px 80px;
  padding: 32px;
  display: flex;
  /* gap: 96px; */
  border-radius: 25px;
  box-shadow: 0 23px 44px -4px rgba(176, 183, 195, 0.14);
}

.features-panel-child-1 {
  width: 66%;
  margin-right: 10px;
}

.features-panel-child-2 {
  position: relative;
  width: 33%;
}

.features-panel-2-child-1 {
  position: relative;
  width: 50%;
}

.features-panel-2-child-2 {
  width: 50%;
  margin-right: 10px;
}

.avalanche-beta-panel {
  padding: 96px 0 0 0;
  display: flex;
}

.phone-laptop-image {
  position: absolute;
  top: 96px;
  bottom: 1px;
  right: 0;
}

.avalanche-header {
  font-size: 20px;
  color: #e7470a;
  font-weight: 600;
}

.avalanche-beta-title {
  margin-top: 12px;
  font-size: 34px;
  font-weight: bold;
  color: #393939;
}

.avalanche-beta-subtitle {
  margin-top: 16px;
  font-size: 20px;
  color: #86898b;
}

.avalanche-beta-empty {
  flex: 1;
}

.faq-contents {
  margin-top: 32px;
  /* padding: 0 224px; */
}

.header-title {
  padding: 0 20px;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
}

.header-title-break {
  display: none;
}

.knowledge-top-title {
  font-size: 16px;
  color: #e7470a;
  font-weight: 600;
}

.knowledge-title {
  margin-top: 12px;
  font-size: 40px;
  font-weight: bold;
  color: #393939;
  /* text-align: center; */
}

.knowledge-subtitle {
  margin-top: 20px;
  font-size: 20px;
  color: #86898b;
  line-height: 1.5;
  /* text-align: center; */
}

.features-title {
  margin-top: 24px;
  font-size: 30px;
  font-weight: bold;
  color: #101828;
}

.features-subtitle {
  margin-top: 16px;
  font-size: 18px;
  color: #86898b;
  line-height: 1.5;
}

.features-image-panel {
  position: absolute;
  flex: 1;
  display: flex;
  align-items: center;
  right: -190px;
}

.features-image-panel-2 {
  position: absolute;
  flex: 1;
  display: flex;
  align-items: center;
  left: -170px;
}

.features-image {
  position: relative;
  flex: 1;
  border-radius: 20.4px;
  box-shadow: 3px 24px 60px 0 rgba(174, 174, 174, 0.25);
  background-color: #fafafb;
  padding: 32.7px 37.6px;
}

.features-image-size {
  width: 392px;
}

.the-problem-top-title {
  font-size: 20px;
  color: #e7470a;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.the-problem-title {
  margin-top: 12px;
  font-size: 48px;
  font-weight: bold;
  color: #281910;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.the-problem-subtitle {
  margin-top: 20px;
  font-size: 20px;
  color: #86898b;
  text-align: left;
  line-height: 1.5;
}

.the-problem-image {
  display: block;
}

.the-problem-image-vertical {
  display: none;
  width: 100%;
}

.avalanche-beta-panel {
  border-bottom: 1px solid #eaeaea;
}

.avalanche-beta-parent {
  border-bottom: 0;
}

.roadmap-title {
  color: #E7470A;
  font-size: 75px;
}

.roadmap-item-title {
  display: flex;
  flex-direction: column;
}

.roadmap-list {
  margin-top: 40px;
  font-weight: 600;
  font-size: 25px;
}

.faq-panel {
  margin: 0 158px;
  padding: 96px 91px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 23px 44px -4px rgba(176, 183, 195, 0.14);
}

.faq-title {
  font-size: 40px;
  font-weight: bold;
  color: #281910;
  text-align: center;
}

.faq-subtitle {
  margin-top: 14px;
  font-size: 20px;
  color: #86898b;
  text-align: center;
}

.get-in-touch-panel {
  margin: 0 158px;
  padding: 32px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 23px 44px -4px rgba(176, 183, 195, 0.14);
}

.copyright-footer {
  display: flex;
  width: 100%;
  margin-top: 64px;
  border-top: 1px solid #fff;
  padding-top: 32px;
}

.nav-footer {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

.hackathon-panel {
  margin: 0 158px;
  overflow: hidden;
  display: flex;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 23px 44px -4px rgba(176, 183, 195, 0.14);
}

.hackathon-title {
  font-size: 48px;
  color: #393939;
  font-weight: bold;
  text-align: center;
  margin: 96px 0;
}

@media (max-width: 1690px) {
  .avalanche-beta-content {
    flex: 1;
  }
}

@media (max-width: 1440px) {
  /* .line-pattern-right {
    right: -5px;
  }

  .line-pattern-left {
    left: -5px;
  } */

  .partners-panel {
    padding: 96px 60px;
  }

  .partners-image {
    width: 100%;
    height: 100%;
  }

  .the-problem-image {
    height: 140px;
    width: 100%;
  }

  /* .the-problem-panel {
    padding: 96px 50px;
  } */
}

@media (max-width: 1200px) {
  /* .line-pattern-right {
    right: -2px;
  }

  .line-pattern-left {
    left: -2px;
  } */

  .features-panel-child-1 {
    width: 66%;
    margin-right: 200px;
  }

  .features-panel-2-child-1 {
    margin-right: 50px;
  }

  .roadmap-panel {
    padding: 96px 0;
  }

  .faq-contents {
    margin-top: 32px;
    padding: 0;
  }

  .footer-panel {
    margin: 0 30px;
  }

  .phone-laptop-image {
    height: 100%;
    position: relative;
    top: 0;
    margin: 60px 0 0 120px;
  }

  .avalanche-beta-content {
    margin: 60px 0;
    flex: 1;
  }

  .avalanche-beta-empty {
    flex: 0;
    display: none;
  }

  .faq-panel {
    padding: 50px;
  }
}

@media (max-width: 950px) {
  .panel {
    max-width: none;
    margin: 0 auto;
    padding: 0 30px;
  }

  .section-wrapper-flex {
    flex-direction: column;
    margin-top: 50px;
  }

  .analogy-image {
    margin: 60px 0px 20px 0px;
  }

  .problem-image {
    margin: 60px 0px 20px 0px;
  }

  .stats-image {
    margin:60px auto 0px auto;
    height: auto;
  }


  .testnet-stats {
    text-align: left;
    margin-bottom: 20px;
  }

  .section-wrapper-block {
    margin-top: 50px;
  }

  .footer {
    margin-top:30px;
  }

  .section-text {
    margin-right: 0px;
  }

  .features-panel {
    flex-direction: column;
    gap: 40px;
  }

  .features-panel-2 {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .features-image {
    flex: 1;
    border-radius: 0;
    padding: 0;
    background-color: unset;
    box-shadow: unset;
  }

  .features-image-panel {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    right: 0;
  }

  .features-image-panel-2 {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    left: 0;
  }

  .features-panel-child-1 {
    width: 100%;
  }

  .features-panel-child-2 {
    position: relative;
    width: 100%;
  }

  .features-panel-2-child-1 {
    position: relative;
    width: 100%;
  }

  .features-panel-2-child-2 {
    width: 100%;
    margin-right: 10px;
  }

  .features-image-size {
    width: 100%;
  }

  .hackathon-panel {
    flex-direction: column;
  }
}

@media (max-width: 780px) {
  .panel {
    max-width: none;
    margin: 0 auto;
  }

  .partners-panel {
    padding: 96px 0px;
  }

  .about-musing-panel {
    padding: 96px 30px;
  }

  .avalanche-beta-panel {
    padding: 30px 0 0 0;
    display: flex;
    flex-direction: column;
  }

  .phone-laptop-image {
    position: relative;
    top: 0;
    right: 0;
    margin: 60px 0 0 60px;
  }

  .nav-contents {
    max-width: none;
    margin: 0;
  }

  .nav-items {
    display: none;
  }

  .features-panel {
    margin: 0 30px;
    padding: 30px;
    flex-direction: column;
    gap: 40px;
  }

  .features-panel-2 {
    margin: 48px 30px;
    padding: 30px;
    flex-direction: column-reverse;
    gap: 40px;
  }

  .line-pattern-right {
    right: -2px;
    bottom: -10px;
  }

  .line-pattern-left {
    left: -2px;
    bottom: -10px;
  }

  .faq-panel {
    margin: 0 30px;
  }

  .faq-contents {
    margin-top: 32px;
    padding: 0;
  }

  .get-in-touch-panel {
    margin: 0 30px;
  }

  .footer-panel {
    max-width: 1200px;
    margin: 0px 30px;
    padding: 46px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    display:flex;
    align-items:center;
    font-weight:600;
  }

  .footer-link {
    margin-right:20px;
    color:#2462BC;
    text-decoration:none;
  }

  .the-problem-panel {
    padding: 96px 30px;
  }

  .avalanche-beta-panel {
    border-bottom: 0;
  }

  .features-image {
    flex: 1;
    border-radius: 0;
    padding: 0;
    background-color: unset;
    box-shadow: unset;
  }

  .features-image-panel {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    right: 0;
  }

  .features-image-panel-2 {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    left: 0;
  }

  .features-panel-child-1 {
    width: 100%;
  }

  .features-panel-child-2 {
    position: relative;
    width: 100%;
  }

  .features-panel-2-child-1 {
    position: relative;
    width: 100%;
  }

  .features-panel-2-child-2 {
    width: 100%;
    margin-right: 10px;
  }

  .features-image-size {
    width: 100%;
  }

  .hackathon-panel {
    margin: 0 30px;
  }

  .hackathon-title {
    font-size: 34px;
    margin: 64px 0 48px 0;
  }
}

@media (max-width: 700px) {
  .nav-contents {
    padding: 20px 0px;
  }

  /* .logo-link {
    display: none;
  }

  .icon-link {
    display: inline-block;
  } */

  .header {
    font-size: 65px;
    letter-spacing: -2px;
    line-height: 67px;
    margin-top: 170px;
  }

  .sub-header {
    font-size: 21px;
    font-weight: 500;
    color: #1C1C1C;
    line-height: 36px;
    margin-top: 25px;
  }


  .top-buttons-wrapper {
    flex-direction: column;
    margin-top: 40px;
  }

  .top-button {
    margin-bottom: 10px;
    padding: 16px 0px;
    font-size: 18px;
    border-radius: 14px;
  }

  .top-button-margin {
    margin-right: 0px;
  }

  .top-button-clear {
    border: 2px solid #ECECEC;
  }

  .preview-image {
    min-height:150px;
    margin-top: 30px;
  }

  .section-title {
    font-size: 48px;
    line-height: 52px;
  }

  .section-title-sm {
    font-size: 50px;
    line-height: 60px;
  }

  .roadmap-items {
    margin-top: 40px;
  }

  .footer-link-hidden {
    display: none;
  }
}

@media (max-width: 550px) {
  .header {
    font-size: 57px;
    line-height: 62px;
    margin-top: 120px;
    letter-spacing: -1px;
    /* word-spacing: 9999999px;  */
    /* https://stackoverflow.com/questions/4212909/can-css-force-a-line-break-after-each-word-in-an-element */
  }

  .sub-header {
    font-size: 18px;
    line-height: 30px;
    margin-top: 18px;
    text-align: left;
  }

  .top-buttons-wrapper {
    width: 100%;
    flex-direction: column;
    margin-top: 32px;
  }

  .section-title {
    font-size: 44px;
    line-height: 48px;
  }

  .partners-list {
    flex-direction: column;
    gap: 20px;
  }

  .header-title {
    padding: 0 20px;
    font-size: 45px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
  }

  .header-title-break {
    display: block;
    height: 0;
  }

  .hero-line-pattern-1 {
    position: absolute;
    top: 420px;
    height: 233px;
  }

  .hero-line-pattern-2 {
    position: absolute;
    bottom: 70px;
    right: 0;
    height: 233px;
  }

  .about-musing-panel {
    padding: 64px 0px;
  }

  .knowledge-top-title {
    font-size: 14px;
  }

  .knowledge-title {
    font-size: 30px;
  }

  .knowledge-subtitle {
    font-size: 18px;
  }

  .line-pattern-left {
    display: none;
  }

  .line-pattern-right {
    display: none;
  }

  .features-title {
    margin-top: 24px;
    font-size: 24px;
    font-weight: bold;
    color: #101828;
  }

  .features-subtitle {
    margin-top: 16px;
    font-size: 16px;
    color: #667085;
  }

  .features-image {
    position: relative;
    flex: 1;
    border-radius: 0;
    padding: 0;
  }

  .the-problem-top-title {
    font-size: 14px;
  }

  .the-problem-title {
    font-size: 30px;
  }

  .the-problem-subtitle {
    font-size: 18px;
  }

  .the-problem-image {
    display: none;
  }

  .the-problem-image-vertical {
    display: block;
  }

  .phone-laptop-image {
    position: relative;
    top: 0;
    right: 0;
    margin: 0 0 0 60px;
  }

  .avalanche-beta-parent {
    border-bottom: 1px solid #eaeaea;
  }

  .roadmap-title {
    color: #E7470A;
    font-size: 40px;
  }

  .roadmap-items {
    display:flex;
    flex-direction: column;
  }

  .roadmap-item {
    background-color: #f6f6f6;
    padding: 128px 34px 34px 34px;
    margin-bottom: 18px;
  }

  .roadmap-item-title {
    display: flex;
    flex-direction: column-reverse;
  }

  .roadmap-list {
    margin-top: 20px;
    font-weight: 600;
    font-size: 20px;
  }

  .faq-panel {
    padding: 30px;
  }

  .faq-title {
    font-size: 30px;
  }

  .faq-subtitle {
    font-size: 18px;
  }

  .copyright-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }

  .nav-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
  }

  .faq-panel {
    margin: 0;
  }

  .get-in-touch-panel {
    margin: 0;
  }

  .features-panel {
    margin: 0;
  }

  .features-panel-2 {
    margin: 48px 0;
  }

  .the-problem-panel {
    padding: 96px 0;
  }

  .avalanche-header {
    font-size: 14px;
  }

  .avalanche-beta-title {
    font-size: 30px;
  }

  .avalanche-beta-subtitle {
    font-size: 20px;
  }

  .hackathon-panel {
    margin: 0;
  }
}

@media (max-width: 400px) {
  .header {
    font-size: 52px;
    line-height: 58px;
    margin-top: 120px;
  }
}