@import "fonts.css";
@import "normalize.css";
@import "variables.css";
@import "icons.css";
@import "modal.css";
@import "general.css";
@import "header.css";

.sections > section{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  height: 100% !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 6.5rem 2rem 0;
  position: relative;
}

/* Menu */
.fp-sections .menu{
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding-right: 0.875rem;
  filter: drop-shadow(0 0.25rem 3.125rem #000);
}
.menu-item{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--White, #fff);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 0;
  transition: 0.2s;
  border-right: 0.125rem solid var(--Primary, #72D401);
}
.menu-item:first-child{
  padding-top: 1.5rem;
}
.menu-item:last-child{
  padding-bottom: 1.5rem;
}
.menu-item:hover{
  color: var(--Primary, #72D401);
}
.menu-item:after{
  content: "";
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--White, #fff);
  margin-left: 0.5rem;
  margin-right: -0.375rem;
  transition: 0.2s margin-left;
}
.menu-item.active:after{
  content: "";
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  background: url("/images/new-index/menu-dot.svg") no-repeat center;
  margin-left: 1rem;
  margin-right: -1rem;
}

.sections > section.main,
.sections > section.contacts{
  background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(1,1,1,0) 100%), url("/images/new-index/pages/primary.jpeg");
}
.sections > section.gallery,
.sections > section.calculator{
  background-color: var(--Background, #101010);
}

/* Main section */
section.main .primary-title{
  margin: 0 0 2rem;
}
.main-text{
  max-width: 49.5rem;
  line-height: 1.375;
  margin: 0 0 2rem;
}
.main-bottom{
  margin-top: auto;
  margin-left: -2rem;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 3rem;
}
.main-video{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 1.5rem;
  overflow: hidden;
  width: 27.5rem;
  max-width: 100vw;
  height: 12rem;
  flex-shrink: 0;
  border: 0.0625rem solid var(--White, #fff);
}
.main-video:before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  border-top-right-radius: 1.5rem;
}
.main-video img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-play{
  --border: 0.0625rem;
  --space: 1rem;
  position: absolute;
  cursor: pointer;
  width: 6rem;
  height: 6rem;
}
.video-play .mask{
  margin-left: 0.25rem;
}
.stats{
  width: 100%;
  display: flex;
  margin: 1.5rem 0;
}
.stats-item{
  flex: 1;
}
.stats-item__title{
  font-weight: 700;
  font-size: 2.25rem;
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  position: relative;
  z-index: 0;
}
.stats-item__title:before{
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 1.5rem;
  height: 2rem;
  background-color: var(--Primary, #72D401);
  border-radius: 0.3125rem;
  z-index: -1;
}
.stats-item__text{
  padding-left: 0.75rem;
}

/* Contacts section */
section.contacts .primary-title{
  margin: 0 0 4.5rem;
}
.contacts-buttons{
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
}
.socials{
  margin: auto 0;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.socials a{
  display: inline-flex;
  transition: 0.2s;
}
.socials a:hover{
  transform: scale(1.05);
}
.socials a:active{
  transform: scale(0.95);
}

/* About section */
.sections > section.about{
  background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(1,1,1,0) 100%), url("/images/new-index/pages/about.jpeg");
}
section.about .primary-title{
  margin: 0 0 4.5rem;
}
.about-text{
  overflow-y: scroll;
  max-width: 42.5rem;
  max-height: 13.5rem;
  direction: rtl;
  padding-left: 1.25rem;
  margin-bottom: 3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--Primary, #72D401) var(--White, #fff);
}
body .about-text::-webkit-scrollbar,
body .about-text::-webkit-scrollbar-thumb,
body .about-text::-webkit-scrollbar-track { 
    width: 6px;
    border: none;
    background: transparent;
}
body .about-text::-webkit-scrollbar-button,
body .about-text::-webkit-scrollbar-track-piece,
body .about-text::-webkit-scrollbar-corner,
body .about-text::-webkit-resizer {
    display: none;
}
body .about-text::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--Primary, #72D401);
}
body .about-text::-webkit-scrollbar-track {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='192' viewBox='0 0 6 192' fill='none'%3E%3Crect x='2' width='2' height='192' fill='%23D9D9D9'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: contain;
}
.about-text p{
  direction: ltr;
  line-height: 1.375;
}

.about-bottom{
  --padding: 2rem;
  width: calc(100% + var(--padding));
  margin-top: auto;
  margin-left: calc(-1 * var(--padding));
  display: flex;
  align-items: flex-end;
}
.about-media{
  position: relative;
  border-top-right-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
  width: 16.25rem;
  height: 12.75rem;
  flex-shrink: 0;
  border: 0.0625rem solid var(--White, #fff);
}
.about-media img{
  border-top-right-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-play{
  --border: 0.0375rem;
  --space: 0.625rem;
  position: absolute;
  cursor: pointer;
  width: 3.5rem;
  height: 3.5rem;
  top: -1.625rem;
  right: -1.625rem;
  background-color: var(--Primary, #72D401);
}
.media-play:before{
  border-color: var(--White-03, rgba(255, 255, 255, 0.3));
}
.media-play:after{
  border-color: var(--White-05, rgba(255, 255, 255, 0.5));
}
.media-play .mask{
  transform: scale(0.6);
  background-color: var(--White, #fff);
}
.media-play .mask{
  margin-left: 0.125rem;
}
.person{
  border-top-right-radius: 1.5rem;
  background-color: var(--Primary, #72D401);
  padding: 1rem 0.75rem 0.75rem;
  font-weight: 600;
  max-width: 24rem;
  width: 100%;
}
.person-name{
  font-size: 2rem;
}
.person-position{
  font-size: 1.25rem;
}

/* Process section */
.sections > section.process{
  background-image: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(1,1,1,0) 60%), url("/images/new-index/pages/primary.jpg");
}
section.process .primary-title{
  margin: auto 0 3.25rem;
}
.process-bottom{
  display: flex;
  margin-bottom: 2.25rem;
}
.process-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem;
  padding: 0 0.75rem 1.5rem;
  background: rgba(2, 2, 2, 0.01);
  box-shadow: 0 0.25rem 3.5rem 0 rgba(106, 197, 1, 0.25);
}
.process-item__icon{
  display: flex;
  justify-content: center;
  background: var(--Primary, #72D401);
  padding: 0.625rem;
  margin: 0 1.25rem 1.5rem;
  border-bottom-right-radius: 1.25rem;
  border-bottom-left-radius: 1.25rem;
}
.process-item__icon .mask{
  background: var(--dsds, #272727);
}
.process-item__text{
  text-align: center;
  font-size: 0.875rem;
}
.process-arrow{
  margin: auto 1.75rem;
}
.process-dash{
  width: 3rem;
  height: 0.0625rem;
  background: #fff;
  margin: auto 2.5rem;
}

/* Gallery section */
section.gallery{
  overflow: hidden;
}
section.gallery:after{
  content: "";
  filter: blur(4.25rem);
  background-color: var(--Background, #101010);
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8%;
  left: 82%;
  z-index: 1;
  pointer-events: none;
}
section.gallery .primary-title{
  margin: 0 0 2.75rem;
}
.gallery-container{
  position: relative;
  overflow: hidden;
  width: 100%;
}
body.gallery-cursor{
  cursor: none;
}
.gallery .cursor{
  top: 50%;
  z-index: 10;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6875rem;
  height: 4.6875rem;
  font-size: 0.875rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(15, 15, 15, 0.8);
  border: 0.0625rem solid var(--Primary, #72D401);
}
.gallery-swiper .swiper-slide{
  width: 25%;
}
.gallery-swiper .swiper-slide:nth-child(odd){
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
}
.gallery-swiper .swiper-slide:nth-child(odd) .slider-text{
  margin-bottom: 1rem;
}
.gallery-swiper .swiper-slide:nth-child(even){
  padding-bottom: 1.75rem;
  display: flex;
  flex-direction: column-reverse;
}
.gallery-swiper .swiper-slide:nth-child(even) .slider-text{
  margin-top: 1rem;
}
.gallery-swiper .swiper-slide img{
  border-radius: 1.25rem;
}
.gallery-swiper .slider-text{
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
}

/* Calculator section */
section.calculator .primary-title{
  margin: 0 0 5rem;
}
.calculator-container{
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.25rem;
}
.calculator-graph{
  height: 30rem;
}
.calculator-form{
  --columns: 2;
  --gap: 1rem;
  --gap-columns: calc(var(--columns) - 1);
  --gap-count: calc(var(--gap) / var(--columns) * var(--gap-columns));
  flex: 1;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--gap);
}
.calculator-input{
  flex-basis: calc(calc(100% / var(--columns)) - var(--gap-count));
  display: flex;
  flex-direction: column;
}
.calculator-input .form-control{
  width: 100%;
}
.calculator-input input::-webkit-outer-spin-button,
.calculator-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calculator-input input[type=number] {
  -moz-appearance: textfield;
  padding-right: 2rem;
}
.calculator-input .form-control,
.calculator-input .form-control:focus{
  outline: none;
  color: var(--White, #fff);
  font-size: 0.875rem;
  line-height: 1.357;
  padding: 0.5rem 0.75rem;
  min-height: 40px;
  background-color: transparent;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--Primary, #72D401);
}
.calculator-input .form-control:focus{
  box-shadow: 0 0 0 0.25rem rgba(114, 212, 1, 0.25)
}
.calculator-input .form-control::placeholder{
  color: var(--White, #fff);
  opacity: 0.6;
}
.form-label {
  order: 1;
  font-size: 0.875rem;
  color: #ADADAD;
  margin: 0.625rem 0 0;
}
.money-input{
  position: relative;
  --height: 2.5rem;
}
.money-input .form-control{
  height: var(--height);
}
.money-input:after{
  --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' viewBox='0 0 9 16' fill='none'%3E%3Cpath d='M8.928 10.896C8.928 11.7387 8.624 12.448 8.016 13.024C7.41867 13.6 6.624 13.952 5.632 14.08V15.216C5.632 15.4293 5.568 15.6 5.44 15.728C5.32267 15.856 5.16267 15.92 4.96 15.92C4.75733 15.92 4.592 15.856 4.464 15.728C4.34667 15.6 4.288 15.4293 4.288 15.216V14.112C3.648 14.0587 3.02933 13.9307 2.432 13.728C1.84533 13.5147 1.344 13.2267 0.928 12.864C0.725333 12.7147 0.624 12.5013 0.624 12.224C0.624 12.032 0.672 11.872 0.768 11.744C0.874667 11.6053 1.00267 11.536 1.152 11.536C1.30133 11.536 1.48267 11.6053 1.696 11.744C2.72 12.4373 3.75467 12.784 4.8 12.784C5.58933 12.784 6.19733 12.624 6.624 12.304C7.06133 11.984 7.28 11.5307 7.28 10.944C7.28 10.592 7.16267 10.3093 6.928 10.096C6.704 9.872 6.416 9.696 6.064 9.568C5.72267 9.44 5.248 9.30133 4.64 9.152C3.84 8.94933 3.18933 8.74667 2.688 8.544C2.18667 8.34133 1.75467 8.02667 1.392 7.6C1.04 7.17333 0.864 6.608 0.864 5.904C0.864 5.04 1.17333 4.30933 1.792 3.712C2.42133 3.104 3.248 2.74133 4.272 2.624V1.504C4.272 1.29067 4.33067 1.12 4.448 0.992C4.576 0.863999 4.74133 0.799999 4.944 0.799999C5.14667 0.799999 5.30667 0.863999 5.424 0.992C5.552 1.12 5.616 1.29067 5.616 1.504V2.624C6.16 2.67733 6.67733 2.81067 7.168 3.024C7.66933 3.22667 8.112 3.504 8.496 3.856C8.70933 4.02667 8.816 4.24 8.816 4.496C8.816 4.67733 8.76267 4.83733 8.656 4.976C8.54933 5.11467 8.42133 5.184 8.272 5.184C8.12267 5.184 7.94133 5.11467 7.728 4.976C7.26933 4.624 6.832 4.36267 6.416 4.192C6 4.02133 5.50933 3.936 4.944 3.936C4.208 3.936 3.62133 4.10667 3.184 4.448C2.74667 4.78933 2.528 5.25333 2.528 5.84C2.528 6.23467 2.65067 6.55467 2.896 6.8C3.14133 7.04533 3.44533 7.23733 3.808 7.376C4.17067 7.504 4.66667 7.64267 5.296 7.792C6.07467 7.984 6.704 8.18133 7.184 8.384C7.664 8.576 8.07467 8.87467 8.416 9.28C8.75733 9.67467 8.928 10.2133 8.928 10.896Z' fill='white'/%3E%3C/svg%3E");
  content: "";
  display: flex;
  position: absolute;
  right: 0.125rem;
  top: 0;
  height: var(--height);
  width: 1.75rem;
  background: var(--_icon) no-repeat center;
  border-left: 0.0625rem solid var(--Primary);
}
.profit-result{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.profit-result .primary-button{
  align-self: flex-start;
}
.profit{
  width: 100%;
  border: 0.0625rem solid var(--Primary, #72D401);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profit-title{
  color: #ADADAD;
  font-size: 0.875rem;
}
.profit-value{
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--Primary, #72D401);
}
.profit-graph{
  bottom: 2rem;
  transform: translateY(-1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profit-graph__value{
  border-radius: 2rem;
  border: 0.0625rem solid var(--Primary, #72D401);
  background: #212121;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(114, 212, 1, 0.38);
  font-weight: 700;
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
}
.profit-graph__dot{
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--Primary, #72D401);
  filter: drop-shadow(0px 0px 0.3125rem var(--Primary, #72D401));
  margin-bottom: 0.25rem;
}
.profit-graph__line{
  display: block;
  flex-grow: 1;
  border: 1px dashed var(--Primary, #72D401);
  filter: drop-shadow(0px 0px 0.375rem var(--Primary, #72D401));
}

@media (min-width: 1200px) {
  .calculator-graph{
    flex: 1.28;
  }
}
@media (min-width: 992px) {
  .fp-sections{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .stats-item:not(:last-child){
    margin-right: 2.5rem;
    padding-right: 2.5rem;
    border-right: 0.0625rem solid var(--White, #fff);
  }
  .sections section.calculator {
    padding-right: 12rem;
  }
  .gallery-container{
    margin-left: 2rem;
    width: calc(100% - 3.5rem);
  }
}
@media (max-width: 1440px) {
  .process-arrow,
  .process-dash{
    margin: auto 1rem;
  }
}
@media (max-width: 1199px) {
  h1{
    font-size: 2.5rem;
  }
  .primary-title:before {
    width: 2.5rem;
  }
  .sections > section{
    padding: 6.5rem 1rem 0;
  }
  .about-bottom{
    --padding: 1rem;
  }
  .main-bottom{
    margin-left: -1rem;
    gap: 1rem;
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .stats{
    width: calc(100% - 8rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .process-arrow,
  .process-dash{
    width: 2rem;
  }
  section.about .primary-title,
  section.calculator .primary-title,
  section.contacts .primary-title{
    margin: 0 0 2.5rem;
  }
  .calculator-container{
    flex-direction: column-reverse;
  }
  .calculator-graph{
    width: 100%;
    height: 20rem;
  }
  .gallery-swiper .swiper-slide{
    width: 33.33%;
  }
  .contacts-buttons{
    gap: 1rem;
  }
}
@media (max-width: 991px) {
  body{
    font-size: 14px;
  }
  [data-swiper-parallax-x]{
    transform: none !important;
  }
  .fp-sections .menu{
    display: none;
  }
  .fp-sections > .swiper-wrapper{
    flex-direction: column;
  }
  .stats{
    flex-direction: column;
    width: 100%;
    gap: 2rem 1rem;
    margin: 4rem 0;
  }
  .gallery .cursor{
    display: none;
  }
  .gallery-swiper .swiper-slide{
    width: 50%;
  }
  .process-dash{
    color: red;
  }
  .process-arrow, 
  .process-dash{
    transform: rotate(90deg);
    margin: 0 0.5rem;
  }
  .process-bottom {
    flex-direction: column;
    row-gap: 2rem;
    align-items: center;
  }
  .process-item{
    width: 100%;
    background: rgba(2, 2, 2, 0.5);
  }
  section.process .primary-title {
    margin: 0 0 3.25rem;
  }
  .profit-result{
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  .sections > section{
    min-height: auto;
    padding: 6.5rem 1rem 4rem;
  }
  .primary-title{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .main-bottom{
    width: 100%;
    margin-left: 0;
  }
  .main-video{
    width: 100%;
    border-radius: 1.5rem;
  }
  .stats{
    padding: 0;
  }
  .about-bottom{
    flex-direction: column;
  }
  .form-label{
    font-size: 0.75rem;
  }
  .about-bottom{
    width: 100%;
    margin: 0;
  }
  .about-media{
    width: 100%;
  }
  .media-play{
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }
  .person{
    max-width: initial;
    border-radius: 0 0 1.5rem 1.5rem;
  }
  .contacts-buttons{
    margin: 2.5rem 0 5rem;
  }
  .gallery-swiper .swiper-slide{
    width: 75%;
  }
  .process-bottom{
    align-self: center;
  }
  .socials{
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 359px) {
  h1 {
    font-size: 2rem;
  }
  .calculator-input{
    flex-basis: 100%;
  }
  .primary-button{
    font-size: 1rem;
  }
}