@font-face {
  font-family: 'SFPRO BOLD';
  src: url('../assets/fonts/sf-pro-display/SFPRODISPLAYBOLD.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SFPRO MEDIUM';
  src: url('../assets/fonts/sf-pro-display/SFPRODISPLAYMEDIUM.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SFPRO REGULAR';
  src: url('../assets/fonts/sf-pro-display/SFPRODISPLAYREGULAR.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --black: #000000;
  --white: #FFFFFF;
  --white-10: rgba(255, 255, 255, .1);
  --white-40: rgba(255, 255, 255, .4);
  --main-color: #40FF53;

  --sf-bold: 'SFPRO BOLD';
  --sf-medium: 'SFPRO MEDIUM';
  --sf-regular: 'SFPRO REGULAR';
}

html, body {
  padding: 0;
  margin: 0;
  font-family: var(--sf-regular);
  color: var(--white);
  font-weight: normal;
  font-style: normal;
  line-height: normal;

  background-color: var(--black);
}
/* general */
header, footer, section, .ctr-fluid {
  width: 100%;
}
.ctr {
  max-width: 1256px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
.btn-main {
  padding: 16px;
  box-sizing: border-box;
  background-color: var(--main-color);
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  border-radius: 24px;

  color: var(--black);
  font-family: var(--sf-bold);
  font-size: 17px;
}
.btn-secondary {
  padding: 18px 24px;
  box-sizing: border-box;
  border-radius: 24px;
  background: var(--white-10);

  color: var(--white,);
  font-family: var(--sf-bold);
  font-size: 24px;

  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
}
h1 {
  color: var(--white);
  font-family: var(--sf-bold);
  font-size: 64px;
  margin: 0;
  padding: 0;
}
h2 {
  color: var(--white);
  font-family: var(--sf-bold);
  font-size: 64px;
  margin: 0;
  padding: 0;
}
p {
  color: var(--white);
  font-family: var(--sf-regular);
  font-size: 28px;
  margin: 12px 0px;
}
.section-title {
  color: var(--main-color);
  font-family: var(--sf-bold);
  font-size: 24px;
  text-transform: uppercase;
}
.section-title + h2 {
  margin-top: 12px;
}
p + .btn-secondary {
  margin-top: 12px;
}
/* general */

/* header */
.header-ctr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
  box-sizing: border-box;
}
/* header */

/* main */
.main-ctr {
  min-height: calc(100vh - 116px);
  background-image: url('https://cdngoat.org/web-revibeapp/assets/bg-light.png');
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 24px;
  padding-bottom: 92px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.main-ctr p {
  color: var(--white);
  font-size: 32px;
  padding: 0;
}
/* main */

/* generate sesction */
.generate-section-ctr {
  min-height: 100vh;
  padding-top: 24px;
  padding-bottom: 92px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.generate-section-ctr video {
  width: 80%;
}
/* generate sesction */

/* enhance section */
.enhance-section-ctr {
  position: relative;
  min-height: 100vh;
  padding-top: 24px;
  padding-bottom: 92px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.enhance-section-info {
  max-width: 566px;
  width: 100%;
  margin-left: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.enhance-section-images {
  position: relative;
}
.esi-one {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
.esi-two {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-30%, 5%);
}
/* enhance section */

/* boost section */
.boost-section-ctr {
  position: relative;
  min-height: 100vh;
  padding-top: 24px;
  padding-bottom: 92px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boost-section-info {
  max-width: 566px;
  width: 100%;
  margin-right: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.boost-section-images {
  position: relative;
}
.bsi-one {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(40%, -25%);
}
/* boost section */

/* filters section */
.filters-section {
  background-image: url('https://cdngoat.org/web-revibeapp/assets/filters-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.filters-section-ctr {
  position: relative;
  min-height: 100vh;
  padding-top: 24px;
  padding-bottom: 92px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.filters-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.filter-box {
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  box-sizing: border-box;
  border-radius: 24px;
  border: 1px solid var(--main-color);
  background: var(--white-10);
}
.filter-box-title {
  color: var(--white);
  font-family: var(--sf-bold);
  font-size: 24px;
  margin-bottom: 8px;
}
.filter-box-images {
  display: flex;
  align-items: center;
}
.filter-box-images img + img {
  margin-left: 8px;
}
/* filters section */

/* join section */
.join-section {
  background-image: url('https://cdngoat.org/web-revibeapp/assets/join-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.join-section-ctr {
  padding-top: 84px;
  padding-bottom: 104px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* join section */

/* footer */
.footer-ctr {
  padding-top: 64px;
  padding-bottom: 240px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-left {
  display: flex;
  flex-direction: column;

  color: var(--white-40);
  font-family: var(--sf-bold);
  font-size: 15px;
}
.footer-left img {
  margin-bottom: 12px;
}

.footer-right {
  display: flex;
}
.footer-right a {
  color: #777;
  font-family: var(--sf-bold);
  font-size: 23px;
  text-decoration: none;
}
.footer-right a + a {
  margin-left: 32px;
}
/* footer */


@media only screen and (max-width: 1256px)  {
  /* general */
  h1 {
    font-size: 64px;
  }
  h2 {
    font-size: 48px;
  }
  p {
    font-size: 24px;
  }
  /* general */
}

@media only screen and (max-width: 800px)  {
  section + section {
    margin-top: 64px;
  }
  footer {
    margin-top: 64;
  }
  /* header */
  .header-ctr {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  /* header */

  /* main */
  .main-ctr {
    min-height: unset;
    padding-top: 64px;
    padding-bottom: 64px;
    align-items: flex-start;
  }
  /* main */

  /* generate sesction */
  .generate-section-ctr {
    min-height: unset;
    padding-top: 16px;
    padding-bottom: 16px;
    align-items: flex-start;
  }
  .generate-section-ctr video {
    width: 100%;
  }
  /* generate sesction */

  /* enhance section */
  .enhance-section-ctr {
    min-height: unset;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-direction: column-reverse;
  }
  .enhance-section-info {
    max-width: 100%;
    margin-left: 0px;
    margin-bottom: 24px;
  }
  .enhance-section-images img {
    width: 100%;
  }
  .esi-one {
    display: none;
  }
  .esi-two {
    display: none;
  }
  /* enhance section */

  /* boost section */
  .boost-section-ctr {
    min-height: unset;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-direction: column;
  }
  .boost-section-info {
    max-width: 100%;
    margin-right: 0px;
    margin-bottom: 24px;
  }
  .boost-section-images img {
    width: 100%;
  }
  .bsi-one {
    display: none;
  }
  /* boost section */

  /* filters section */
  .filters-section-ctr {
    min-height: unset;
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-image: none;
  }
  .filters-list {
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: center;
  }
  .filter-box {
    width: 100%;
    max-width: 400px;
  }
  /* filters section */

  /* join section */
  .join-section-ctr {
    padding-top: 36px;
    padding-bottom: 36px;
    align-items: flex-start;
    background-image: none;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(108deg, #006CF0 0%, #00B0ED 14.5%, #00CEC5 28.5%, #00E990 50%, #40FF53 69.5%);
  }
  /* join section */

  /* footer */
  .footer-ctr {
    padding-top: 64px;
    padding-bottom: 214px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 48px;
  }
  .footer-right a + a {
    margin-left: 0px;
    margin-top: 32px;
  }
  /* footer */

}