@import url(../font/stylesheet.css);
/* ========================= عمومی ========================= */
body.no_scroll {
  overflow: hidden;
}

header.header-visible {
  display: block;
}
footer {
  display: none;
}
.steps {
  height: 100vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ========================= preload video ========================= */
#preload {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  transition: opacity 2s ease;
  opacity: 1;
}

/* ========================= step2 ========================= */
.step2 {
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* z-index: 1100; */
}
.step2 .content {
  /* min-height: 390px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 100px;
}
.step2 .green_bg {
  position: absolute;
  top: 15%;
  right: 0;
  transform: translateX(150%);
  opacity: 0;
  width: 100%;
}

.step2 .product_img {
  width: 570px;
  position: absolute;
  top: 9%;
  right: 5%;
  opacity: 0;
  text-align: center;
}
.step2 .product_img .side_img {
  position: absolute;
}
.step2 .product_img .side_img1 {
  left: 20px;
  top: 60px;
}
.step2 .product_img .side_img2 {
  right: 0;
  bottom: 15%;
}

.step2 .data_img {
  transform: translateY(150%);
  opacity: 0;
  margin-bottom: 100px;
}

.step2 .title_box {
  transform: translateY(150%);
  color: #006f0a;
  opacity: 0;
  width: fit-content;
}

.step2 .title_box .section_title {
  font-weight: 600;
  margin: 0 auto 4px;
  font-size: 34px;
  line-height: 1.3;
}

.step2 .title_box .section_caption {
  font-weight: 400;
  font-size: 24px;
  color: #006f0a;
  text-align: center;
  text-align-last: center;
  margin: 0 auto;
}

.step2 .detail_box img {
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;
  margin: 0 auto;
  opacity: 0;
}

/* ========================= step3 ========================= */

.product_swiper {
  right: 0;
  transform: translateX(50%);
  opacity: 0;
  position: relative;
  overflow: visible !important; /* جلوگیری از بلاک شدن اسکرول توسط Swiper */
}
.product_swiper .swiper_content {
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: translateX(0); /* مقدار اولیه */
  transition: transform 0.9s ease-in-out; /* فقط transform انیمیشن شود */
  text-align: center;
}

.product_swiper .swiper_content a {
  max-height: 100%;
}
/* غیرفعال کردن transition پیش‌فرض Swiper برای اسلایدها */
.product_swiper .swiper-slide {
  transition: none !important;
  padding-top: 100px;
}
.product_swiper .swiper_content .show_products_btn {
  position: absolute;
  left: 0%;
  bottom: 0px;
}
.product_swiper .bottom_slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0); /* مقدار اولیه صفر */
  width: 100%;
  opacity: 1;
}
.product_swiper .swiper_content .show_products_btn span {
  margin-right: 6px;
  font-size: 18px;
  color: #676767;
}
.product_swiper .slide_img {
  margin-bottom: 30px;
  max-height: 90%;
}
.product_swiper .title {
  font-size: 26px;
  font-weight: 600;
  margin: 0 auto;
  text-align: center;
  text-align-last: center;
}
.product_swiper .slide1 .title {
  color: #006f0a;
}
.product_swiper .slide2 .title {
  color: #d6963a;
}
.product_swiper .slide3 .title {
  color: #883801;
}
.swiper_arrow {
  position: absolute;
  right: 10%;
  bottom: 17%;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
  background-image: url(../images/arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 32px;
  height: 32px;
}
.swiper-button-next:after {
  transform: rotate(180deg);
}
.swiper-button-next {
  right: unset;
  left: 10px;
}
.swiper-button-prev {
  right: 10px;
  left: unset;
}

/* ========================= step4 ========================= */
.step4 {
  position: relative;
}
.step4 .description {
  position: absolute;
  bottom: 0;
  max-height: 85%;
  right: 0;
}
.step4 .text_box {
  position: relative;
  z-index: 10;
}
.step4 .section_title,
.step5 .section_title {
  text-align: left;
  text-align-last: left;
  margin: 0 0 8px;
}
.step4 .row {
  align-items: center;
}
.step4 .section_caption,
.step5 .section_caption {
  margin: 0;
  color: rgba(0, 83, 7, 0.76);
  line-height: 1.6;
}
.step5 .row {
  align-items: center;
}
.step5 .section_caption {
  max-width: 90%;
}
.wheel_img {
  margin-bottom: 100px;
}

.img_group {
  margin: 0 auto;
}
.step5 .content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.step5 .last_img {
  transform: rotate(20deg);
}
/* ========================= header ========================= */
header {
  display: none;
  height: 15vh;
  padding: 0;
  position: fixed;
  background: transparent;
  transition: background 0.5s ease-in-out; /* انتقال نرم */
}

header .content {
  align-items: center;
  display: flex;
  align-content: center;
  height: 100%;
}

.bottom_steps .content {
  align-items: center;
}
.step6 {
  text-align: center;
}
.video_content {
  background: #fff;
}
.video_content video {
  margin-right: -1px ;
  margin-bottom: -1px ;
}