@font-face {
  /*defining font family name*/
  font-family: 'Tomato-Grotesk-Regular';
  /*giving the source url of the font-family I have given the source path of my project, */
  src: url('../assets/naturalx-fonts/TomatoGrotesk-Regular.otf');
  /*respective font styles*/
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /*defining font family name*/
  font-family: 'Tomato-Grotesk-SemiBold';
  /*giving the source url of the font-family I have given the source path of my project, */
  src: url('../assets/naturalx-fonts/TomatoGrotesk-SemiBold.otf');
  /*respective font styles*/
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* {
  padding: 0;
  margin: 0;

  /* from https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
}

html, body, h2, h3, h4, h5, h6, p {
  font-family: 'Tomato-Grotesk-Regular', sans-serif !important;
}

h1 {
  font-family: 'Tomato-Grotesk-SemiBold', sans-serif !important;
}

:root {
  --naturalX-secondary-green: #42FF6D;
  --naturalX-main-white: #FFF;
  --naturalX-main-background: #023136;
  --naturalX-secondary-background: #04464F;
}

.naturalx-green-font-style {
  color: var(--naturalX-secondary-green)
}

.naturalx-color-white {
  color: var(--naturalX-main-white)
}

h1 {
  font-size: 3.75rem !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 110%;
  font-style: normal
}

h2 {
  font-size: 2.31rem !important;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.05em;
  font-style: normal
}

h3 {
  font-size: 1.75rem !important;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0.05em;
  font-style: normal
}

h4 {
  font-size: 1.3125rem !important;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0.05em;
  font-style: normal;
}

h6 {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.naturalx-h1-size {
  font-size: 3.75rem !important;
}

.naturalx-h2-size {
  font-size: 2.31rem !important;
}

p {
  font-size: 1rem !important;
  letter-spacing: 0.05em;
  line-height: 150%;
  font-style: normal;
  font-weight: 400;
}

.naturalx-section-padding {
  padding-left: 0;
}

/*running text section*/
.naturalx-big-letter-section {
  width: 100%;
  height: auto;
  min-height: 300px;
  background-color: var(--naturalX-secondary-background);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.naturalx-big-letter-item {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  top: 50%;
  right: -5500px;
}

.naturalx-onpage-nav-container {
  padding-left: 30px;
}

.naturalx-onpage-nav-container li a {
  position: relative;
}

.naturalx-onpage-nav-container li a:hover h6, .naturalx-onpage-nav-container li a.active h6 {
  font-family: 'Tomato-Grotesk-SemiBold' !important;
}

.naturalx-onpage-nav-container li a.active h6::before {
  background: var(--naturalX-secondary-green);
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  position: absolute;
  left: -38px;
}

.naturalx-onpage-nav-container li a:not(.active):hover h6::before {
  background: var(--naturalX-secondary-green);
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  position: absolute;
  left: -38px;
  animation-name: width;
  animation-duration: 1s;
}

@keyframes width {
  0% {
    width: 0;
  }
  100% {
    width: 30px;
  }
}

.naturalx-big-letter-item p {
  font-size: 4rem !important;
  color: var(--naturalX-secondary-green);
  letter-spacing: 0.05em;
  font-weight: 400;
  line-height: 120%
}

.naturalx-page-wrapper {
  margin-top: 80px;
}

#top .naturalx-page-wrapper {
  padding: 0;
}

.naturalx-border-bottom-line {
  border-bottom: 1px solid var(--naturalX-secondary-background)
}

@media screen and (min-width: 768px) {
  .naturalx-big-letter-item p {
    font-size: 9rem !important;
  }

  .naturalx-big-letter-section {
    min-height: 600px;
  }

  h1 {
    font-size: 8.5rem !important;
    font-weight: 600;
    line-height: 100%
  }

  h2 {
    font-size: 3.75rem !important;
    line-height: 118%;
  }

  h3 {
    font-size: 2.5rem !important;
    line-height: 125%;
  }

  h4 {
    font-size: 1.687rem !important;
    line-height: 125%;
  }

  h6 {
    font-size: 0.694rem;
  }

  p, li {
    font-size: 1.125rem !important;
    line-height: 150%;
  }

  .naturalx-page-wrapper {
    margin-top: 0;
    padding-top: 0;
  }

  .naturalx-section-padding {
    padding-left: 22%;
  }
}

@media screen and (min-width: 768px) and ( max-width: 1023px) {
  .naturalx-video-headline {
    font-size: 4.5rem !important;
    padding: 30px 0px 20px 30% !important;
  }

  .naturalx-teaser-box, .naturalx-two-columns-wrapper, .naturalx-desktop-footer-inner {
    padding: 30px 60px 20px 28% !important;
  }

  [theme="accent_2"] .naturalx-text-wrapper {
    height: initial;
  }
}

details summary::-webkit-details-marker {
  display: none;
}