@import "global.css";

/* start header */
html {
  scroll-behavior: smooth;
}

.main_header {
  height: 810px;
  background-color: rgba(242, 163, 146, 0.1);
  position: relative;
}

.main_header .inner_header {
  height: 810px;
  position: relative;
}

.main_header .inner_header .header_img_md {
  display: none;
}

.main_header .inner_header .header_img_sm {
  display: none;
}

@media (max-width: 1000px) {
  .main_header .inner_header .header_img_desktop {
    display: none;
  }
  .main_header .inner_header .header_img_md {
    display: block;
  }
}

@media (max-width: 397px) {
  .main_header .inner_header .header_img_md {
    display: none;
  }
  .main_header .inner_header .header_img_sm {
    display: block;
  }
}

/* Header image should be BEHIND lottie but ABOVE description */
.main_header .header_img_Section {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; /* Lower than lottie but higher than description */
}

.main_header .navbar .logo img {
  width: 113px;
  height: 52px;
}

.main_header .navbar {
  padding-top: 53px;
  position: relative;
  z-index: 5; /* Navbar should be above everything else for navigation */
}

.main_header .header_main_content {
  background-image: url(../img/rightPattern.png);
  background-size: auto;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  height: 100%;
  padding-right: 80px;
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 100px;
}

.main_header .description__header_section {
  background-image: url("../img/rightPattern.png");
  background-size: cover;
  background-position: bottom right;
  background-repeat: no-repeat;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 1; /* Lowest z-index */
}

.main_header .header_img_Section {
  flex: 100%;
}

.main_header .description__header_section .header_main_title {
  color: var(--header-title-color);
  font-size: 26px;
  margin-bottom: 24px;
  font-weight: 600;
}

.main_header .description__header_section .header_main_description {
  color: var(--header-description-color);
  font-size: 56px;
  font-weight: 600;
}

.main_header .description__header_section .header_small_title {
  color: #121212;
  font-size: 20px;
  margin-top: 24px;
  font-weight: 400;
}

.main_header .social_stores {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.main_header .store_img {
  width: 135px;
  height: 40px;
}

.main_header .store_img img {
  width: 100%;
  height: 100%;
}

.main_header .social_media_container {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-right: 7px;
}

.main_header .social_media {
  width: 24px;
  height: 24px;
}

.main_header .x {
  width: 28px;
  height: 28px;
}

.main_header .social_media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Updated lottie container structure */
.lottie_container {
  position: absolute;
  width: fit-content;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 99;
  pointer-events: auto;
  /* Added flex display to control children ordering */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lottie_file {
  cursor: pointer;
  width: 120px;
  position: relative;
  z-index: 99;
  pointer-events: auto;
  /* Order this first */
  order: 1;
}

.lottie_container .move_to_bottom {
  margin-top: 20px;
  font-size: 14px;
  font-weight: normal;
  position: relative; /* Changed from absolute to relative */
  cursor: pointer;
  z-index: 99;
  pointer-events: auto;
  /* Position properties no longer needed since using flexbox */
  bottom: auto;
  left: auto;
  transform: none;
  /* Order this second */
  order: 2;
}

@media (max-width: 1393px) {
  .main_header .header_main_content {
    padding-right: 0px;
  }
}

@media (max-width: 1200px) {
  .main_header .description__header_section .header_main_title {
    font-size: 22px;
  }
  .main_header .description__header_section .header_main_description {
    font-size: 36px;
  }
  .main_header .description__header_section .header_small_title {
    font-size: 18px;
  }
}

@media (max-width: 397px) {
  .main_header .navbar .logo img {
    width: 60px;
    height: 28px;
  }
  .main_header .inner_header .navbar .nav-link {
    font-size: 14px;
  }
  .main_header .description__header_section {
    padding-bottom: 57px;
    background-image: none;
  }
  .main_header .journey_title_br {
    display: none;
  }
  .main_header .social_stores {
    flex-wrap: wrap;
  }
  .main_header .header_main_content {
    background-image: none;
  }
  .lottie_file {
    cursor: pointer;
    width: 150px;
  }
}

/* end header */

/* start journey */
.journey_section {
  background-image: url("../img/journeyPattern.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 399px;
}
.journey_section .journey_content .journey_title h2 {
  text-align: center;
  color: #434343;
  font-weight: 700;
  font-size: 32px;
}
.journey_section .journey_steps_main {
  margin-top: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 52px;
}
.journey_section .journey_content .journey_steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex: 1; /* new */
}
.journey_section .journey_content .journey_main_box {
  width: 80px;
  height: 80px;
  background-color: rgba(52, 73, 94, 0.2);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #34495e;
}

.journey_section .journey_content .journey_main_box h5 {
  font-weight: 700;
}

.journey_section .journey_content .journey_main_box_tow {
  color: #f18343;
  background-color: rgba(241, 131, 67, 0.2);
}
.journey_section .journey_content .journey_main_box_three {
  color: #2ecc71;
  background-color: rgba(46, 204, 113, 0.3);
}
.journey_section .journey_content .journey_main_box h5 {
  margin-bottom: 0;
  font-size: 40px;
}
.journey_section .journey_content .journey_description {
  text-align: center;
  color: #434343;
  font-size: 20px;
  max-width: 258px;
  margin-top: 27px;
}
.journey_section .journey_title_br {
  display: none;
}
@media (max-width: 922px) {
  .journey_section .journey_steps_main {
    flex-direction: column;
  }
}
@media (max-width: 397px) {
  .journey_section .journey_content .journey_title h2 {
    font-size: 28px;
  }
  .journey_section .journey_title_br {
    display: block;
  }
  .journey_section .journey_content .journey_description {
    font-size: 18px;
  }
}
/* end journey */
/* start feature_section */
.feature_section {
  position: relative;
}
.feature_section .batternRoe {
  position: absolute;
  top: -202px;
  right: 0;
}
.feature_section .feature_content .feature_article {
  flex: 0.4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 180px;
  padding-right: 24px;
  padding-left: 24px;
}
.feature_section .feature_content .feature_article_description {
  font-size: 22px;
  color: #121212;
  font-weight: normal;
  width: 100%;
  max-width: 392px;
}
.feature_section .feature_content .feature_article_title {
  color: #1d2b4f;
  font-size: 32px;
  font-weight: 600;
  line-height: 150%;
}
.feature_section .right_img_container {
  width: 313px;
  height: 233px;
  margin-right: auto;
}
.feature_section .right_img_container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature_section .feature_left_section {
  flex: 0.6;
  background-image: url("../img/left_feature_bg.png");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 143px calc(100% - -15px);
  position: relative;
  z-index: 0;
  background-size: 42% 551px;
  padding-bottom: -4px;
}
.feature_section .feature_box_item.feture_left_right_card {
  margin-bottom: 116px;
  position: relative;
}
.feature_section .feature_left_section .feature_left_section_item {
  background-image: url("../img/item_header.png");
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 274px;
  width: 100%;
  height: 103px;
  position: relative; /* Add position relative */
  z-index: 2; /* Increase z-index to be higher than the pattern */
}
.feature_section
  .feature_left_section
  .feature_left_section_item
  .feature_left_section_item_img {
  max-width: 72px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding-right: 16px;
  z-index: 3;
}
.feature_section
  .feature_left_section
  .feature_left_section_item
  .feature_left_section_item_img
  img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature_section .feature_left_section .feature_box_item {
  width: 274px;
  box-shadow: 0px 12px 40px #00000012;
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  height: fit-content;
  position: relative;
  z-index: 99999;
  background-color: #fff;
  overflow: hidden;
}

.feature_section .feature_left_section .feature_left_section_item_content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  z-index: 1;
  background-color: #fff; /* Add this */
}

.feature_section
  .feature_left_section
  .feature_left_section_item_content
  .feature_left_section_item_title {
  color: #121212;
  font-size: 22px;
  font-weight: 600;
}

.feature_section
  .feature_left_section
  .feature_left_section_item_content
  .feature_left_section_item_description {
  font-size: 16px;
  color: #3d5a80;
  font-weight: normal;
}

.feature_section .feature_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
}

.feature_inner_section {
  display: flex;
  align-items: center;
  gap: 66px;
  justify-content: end;
}
.featute_left_card_content {
  display: flex;
  flex-direction: column;
  gap: 66px;
}
.feature_section .feature_left_section_right_pattern {
  display: none;
}
@media (max-width: 1087px) {
  .feature_section .feature_content {
    flex-direction: column;
  }
}
@media (max-width: 620px) {
  .feature_inner_section {
    flex-direction: column;
  }
  .feature_section .feature_box_item.feture_left_right_card {
    margin-bottom: 0;
  }
  .feature_section .feature_left_section {
    background-image: none;
  }
  .right_img_container {
    display: none;
  }
}

@media (max-width: 397px) {
  .feature_section .feature_content .feature_article_title {
    font-size: 28px;
  }
  .feature_section .feature_content .journey_title_br {
    display: none;
  }
  .feature_section .feature_content .feature_article_description {
    font-size: 16px;
  }
  .feature_section .batternRoe {
    top: -464px;
  }
  .feature_section .feature_content .feature_article {
    margin-top: 0px;
  }
  .feature_section .feature_left_section {
    padding-top: 106px;
  }
  .feature_section .feature_left_section_right_pattern {
    display: block;
    background-image: url("../img/firstAI_right_pattern.png");
    height: 96px;
    width: 100%;
    position: absolute;
    top: 74px;
    right: -26px;
    z-index: 0;
  }
}

/* end feature_section */

/* start Integrated platform */

.integrated_platform {
  background: #fafafa 0% 0% no-repeat padding-box;
  height: 100%;
  overflow: hidden;
}
.integrated_platform .section {
  padding-bottom: 0 !important;
}
.integrated_platform .integrated_platform_img {
  width: 528px;
  height: auto;
}

.integrated_platform .integrated_platform_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.integrated_platform .integrated_platform_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.integrated_platform .integrated_platform_content .img_logo {
  width: 88px;
  height: 88px;
}
.integrated_platform .integrated_platform_content .img_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.integrated_platform .integrated_platform_content .integrated_platform_title {
  color: #373737;
  font-size: 41px;
  font-weight: 600;
  line-height: 150%;
}
.integrated_platform
  .integrated_platform_content
  .integrated_platform_description {
  color: #5b5b5b;
  font-size: 22px;
  font-weight: 400;
  line-height: 150%;
}
.integrated_platform .integrated_platform_img {
  flex: 0.4;
  width: 354px;
  height: auto;
  /* margin-bottom: 130px; */
}
.integrated_platform .integrated_platform_img img {
  width: 100%;
  height: 100%;
  object-fit: auto;
}
.integrated_platform .integrated_platform_inner_content {
  flex: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 12px;
}
.integrated_platform .integrated_platform_text {
  width: 100%;
}
.integrated_platform .integrated_platform_text .left_img_container {
  text-align: left;
}
@media (max-width: 780px) {
  .integrated_platform .integrated_platform_content {
    flex-direction: column-reverse;
  }
  .integrated_platform .left_img_container {
    display: none;
  }
}
@media (max-width: 397px) {
  .integrated_platform .integrated_platform_content .integrated_platform_title {
    font-size: 28px;
  }
  .integrated_platform
    .integrated_platform_content
    .integrated_platform_description {
    font-size: 16px;
  }
  .integrated_platform {
    background-color: transparent;
    padding-top: 68px;
  }
}
/* end Integrated platform */
/* start first AI */
.first_ai {
}
.first_ai .section {
  position: relative;
}
.first_ai .right_pattern {
  position: absolute;
  top: 113px;
  right: 0;
  rotate: -90deg;
  width: 88px;
  height: 96px;
}
.first_ai .right_pattern img {
  width: 100%;
  height: 100%;
  object-fit: auto;
}
.first_ai .left_pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 139px;
  height: 959px;
}
.first_ai .left_pattern img {
  width: 100%;
  height: 100%;
  object-fit: auto;
}
.first_ai .first_ai_content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 66px;
}
.first_ai .first_ai_content_text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0.5;
  padding-top: 47px;
}
.first_ai .first_ai_content_text .first_ai_content_title {
  color: #373737;
  font-size: 41px;
  font-weight: 600;
  line-height: 150%;
}
.first_ai .first_ai_content_text .first_ai_content_description {
  color: #5b5b5b;
  font-size: 22px;
  font-weight: 400;
  line-height: 150%;
}
.first_ai .first_ai_img {
  max-width: 547px;
  width: 100%;
  height: 100%;
  max-height: 688px;
  flex: 0.5;
  margin-bottom: 160px;
}
.first_ai .first_ai_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.first_ai .bottom_img {
  width: 312px;
  height: 234px;
  margin-right: auto;
  margin-top: 88px;
}
.first_ai .bottom_img_mobile {
  display: none;
  width: 312px;
  height: 234px;
  margin-right: auto;
  margin-top: 88px;
}
.first_ai .bottom_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.first_ai_content .img_logo {
  width: 88px;
  height: 88px;
  margin-left: auto;
}
.first_ai_content .img_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 773px) {
  .first_ai .first_ai_content {
    flex-direction: column;
  }
}
@media (max-width: 773px) {
  .first_ai .bottom_img {
    display: none;
  }
  .first_ai .bottom_img_mobile {
    display: block;
  }
  .first_ai .right_pattern {
    display: none;
  }
}
@media (max-width: 397px) {
  .first_ai .left_pattern {
    top: -1352px;
    z-index: 0;
  }
  .first_ai .left_pattern img {
    position: relative;
    z-index: -1;
  }
  .first_ai .first_ai_content_text .first_ai_content_title {
    font-size: 28px;
  }
  .first_ai .first_ai_content_text .first_ai_content_description {
    font-size: 16px;
  }
  .first_ai .first_ai_content {
    gap: 0;
  }
  .first_ai .first_ai_img {
    margin-bottom: 0;
  }
}
/* end first AI */