:root {
  --primary-1: #44468dFF;

  --vitrin1: #f4f4f3;
  --vitrin2: #e9e9e7;
  --vitrin3: #dededb;
  --vitrin4: #d3d3cf;
  --vitrin5: #bebcb7;
  --vitrin6: #aba69f;
  --vitrin7: #929087;
  --vitrin8: #75736c;
  --vitrin9: #585651;
  --vitrin10: #3a3a36;
  --vitrin11: #2c2b29;
  --vitrin12: #1d1d1b;
  --vitrin13: #0f0e0e;
  --vitrin14: #B1B2B5FF;
  --vitrin15: #9e9e9e;

  --warning1: #FFF8E1;
  --warning2: #F4B740;
  --warning3: #A9791C;

  --error1: #FFF2F2;
  --error2: #ED2E2E;
  --error3: #C30000;

  --sucess1: #F3FDFA;
  --sucess2: #00BA88;
  --sucess3: #00966D;

  --white: #FFFFFF;
  --black: #000000;
  --disable: #BBBBBB;

  --custom-1: #ddcbabFF;
  --custom-2: #eaeaeaFF;
  --custom-3: #3d3a36FF;
  --custom-4: #ddcbab59;
  --custom-5: #8c8c8cFF;
  --custom-6: #3e3b37FF;
  --custom-8: #ddcbab35;
  --custom-9: #dccaaaFF;
  --custom-10: #ddcbab73;

  --gap1: 0.25rem;
  --gap2: 0.5rem;
  --gap3: 0.75rem;
  --gap4: 1rem;
  --gap5: 1.25rem;
  --gap6: 1.5rem;
  --gap7: 1.75rem;
  --gap8: 2rem;
  --gap9: 2.25rem;
  --gap10: 2.5rem;
  --gap11: 2.75rem;
  --gap12: 3rem;

  --HeaderHeight: 108px;
  --ftr-gap: 80px;

}

* {
  padding: 0;
  margin: 0;
  direction: rtl;
  box-sizing: border-box;
}


main {
  max-width: 1920px;
  margin : auto;
}

.zr-txt-nowrap {
  white-space: nowrap;
}


.zr-pb-10 {
  padding-block: 10px;
}

.zr-pi-10 {
  padding-inline: 10px;
}

.zr-p-10 {
  padding: 10px;
}

.sp-fz-32 {
  font-size: 32px;
}

.sp-fz-40 {
  font-size: 40px;
}

.zr-flex {
  flex: 1;
}


.zr-center {
  align-items: center;
}

.sp-right {
  text-align: right;
  padding: 0px !important;
}


.zr-gap-1 {
  gap: var(--gap1);
}

.zr-gap-2 {
  gap: var(--gap2);
}

.zr-gap-3 {
  gap: var(--gap3);
}

.zr-gap-4 {
  gap: var(--gap4);
}

.zr-gap-5 {
  gap: var(--gap5);
}

.zr-gap-6 {
  gap: var(--gap6);
}

.zr-gap-7 {
  gap: var(--gap7);
}

.zr-gap-8 {
  gap: var(--gap8);
}

.zr-gap-9 {
  gap: var(--gap9);
}

.zr-gap-10 {
  gap: var(--gap10);
}

.zr-gap-11 {
  gap: var(--gap11);
}

.zr-gap-12 {
  gap: var(--gap12);
}

.zr-gap-64 {
  gap: 4rem;
}

.zr-mt-main {
  margin-top: 10rem !important;
}

.zr-wrapper {
  max-width: 1600px;
  margin: auto;
  width: 100%;
}


.zr-white-bg {
  background: var(--white);
}

.zr-text-cl {
  color: var(--primary-1);
}

.zr-h-50 {
  height: 50px;
}

.sp-w-6 {
  width: 50% !important;
  max-width: 50%;
}

.zr-obj-cover {
  object-fit: cover;
}

/* start css */
/* -------------------  header  --------------- */
.zr-header-cantainer {
  min-height: 108px;
  height: 108px;
  background: var(--vitrin14);
  border-radius: 120px;
  width: 100%;
  max-width: calc(100% - 1.5rem);
  margin-inline: 0.75rem;
  margin-top: 0.75rem;
}

.wrapper {
  max-width: 1536px;
  margin: 0 auto;
  margin-top: 44px;
}

/* -------------------  section-1  ---------------- */
.zr-main-title {
  line-height: 2.4;
  font-size: 42px;
}

.zr-img-frame {
  max-width: 1283px;
  height: 575px;
  border-radius: 40px;
}

.zr-img {
  border-radius: 40px;
}

.zr-watch {
  width: 214px;
  height: 66px;
  max-height: 66px;
  border: 1px solid var(--white);
  background: #f9fcff26;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 44px;
  margin-right: 44px;
}

.zr-subtitle {
  line-height: 3;
  /*padding-inline: 0.5rem;*/
  padding-inline: 0.25rem;
  max-width: 1254px;
  text-align: justify;
}

/* -----------------  section-2  ------------------ */
.zr_harm_wrapper {
  width: 100%;
  gap: 24px;
}

.zr_harmonic {
  padding-inline: 64.5px;
}

.zr_harmonic::after {
  content: unset !important;
}

.zr_harm_center {
  max-width: 751px;
  max-height: 364px;
  height: 751px;
  justify-content: center;
}

.zr_harm_center::after {
  content: "";
  position: absolute;
  width: 496px;
  height: 410px;
  background: var(--primary-1);
  border-radius: 50%;
  filter: blur(220px);
  z-index: -1;
  bottom: 0;
}

.zr_harm_center img {
  width: 100%;
  height: 364px;
  object-fit: contain;
  border-radius: 20px;
}

.zr_harm_icon>p {
  width: 221px;
}

.zr_harm_icons_right {
  align-items: flex-end;
}

.zr_harm_icons_right .zr_harm_icon:nth-child(2) {
  align-self: flex-start;
}

.zr_harm_icons_left {
  align-items: flex-start;
}

.zr_harm_icons_left .zr_harm_icon:nth-child(2) {
  align-self: flex-end;
}


.zr_harm_icons_right,
.zr_harm_icons_left {
  padding-bottom: 2.5rem;
  max-width: 260px;
  width: 100%;
  gap: 72px;
}

.zr_harm_icons_right div,
.zr_harm_icons_left div {
  max-width: 220px;
}

.zr_harm_icon {
  max-width: 204px;
  width: 100%;
  align-items: center;
  gap: 24px;
}

.zr-bg-icon {
  background: var(--white);
  height: 72px;
  width: 72px;
  box-shadow: 0px 0px 30px 0px #00000026;
}

.zr-bg-icon>img {
  max-width: 45px;
  max-height: 45px;
  height: 100%;
  width: 100%;
}

/* ------------------- section-3 ----------------- */
.zr-answer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 79px 50px;
}

.zr-answer-box {
  max-width: 478px;
  width: 100%;
  height: 276px;
  background: linear-gradient(to bottom, rgba(68, 70, 141, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 36px;
}

.zr-answer-box::before,
.zr-br-gd::before {
  content: "";
  background: linear-gradient(134deg, rgba(68, 70, 141, 1) 12%, rgba(68, 70, 141, 0.3) 33%, rgba(68, 70, 141, 0.4) 67%, rgba(68, 70, 141, 1) 100%);
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 36px;
  right: -1px;
  top: -1px;
  z-index: -1;
}

.zr-answer-box::after,
.zr-br-gd::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--whitepure);
  z-index: -1;
  top: 0;
  left: 0;
  border-radius: 36px;
}

.zr-answer-box img {
  max-width: 100px;
  max-height: 100px;
}

/* ------------------- section-4 ------------------ */
.section-4 {
  padding-inline: 78px;
  margin-bottom: 168px !important;
}

.zr-feature {
  gap: 81px;
}

.zr-feature-desc-list {
  gap: 76px;
}

.zr-feature-desc-list::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  right: 0;
  top: 0;
  margin-right: 14px;
  background: #c9b871FF;
}

.zr-feature-desc-list>li {
  height: 31px;
  display: flex;
  padding-right: calc(50px + 28px);
}

.zr-feature-desc-list>li::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: url("/themes/website/img/customerclub/icons/polygon.svg") no-repeat;
  width: 28px;
  height: 31px;
}

.zr-feature-img {
  max-width: 687px;
  max-height: 564px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bg-cart {
  position: absolute;
  width: 448px;
  height: 547px;
  border-radius: 50%;
  background: #44468dFF;
  filter: blur(400px);
}

.zr-feature-img::before {
  content: '';
  position: absolute;
  max-width: 569px;
  max-height: 569px;
  width: 569px;
  height: 569px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(60deg, rgba(68, 70, 141, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 14.000000000000002%, rgba(68, 70, 141, 0.4692307692307695) 32%, rgba(255, 255, 255, 0) 48%, rgba(68, 70, 141, 1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  padding: 1.75px;
  left: 43%;
  bottom: 0;
  transform: translateX(-50%);
  margin-bottom: -96px;
  opacity: 0.5;
}

.zr-feature-img::after {
  content: '';
  position: absolute;
  max-width: 519px;
  max-height: 519px;
  height: 519px;
  width: 519px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(60deg, rgba(68, 70, 141, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 14.000000000000002%, rgba(68, 70, 141, 0.4692307692307695) 32%, rgba(255, 255, 255, 0) 48%, rgba(68, 70, 141, 1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  padding: 1.75px;
  left: 43%;
  bottom: 0;
  transform: translateX(-50%);
  margin-bottom: -70px;
  opacity: 0.5;
}



/*responsive*/
@media only screen and (max-width: 1920px) {
  .zr_harm_wrapper {
    justify-content: space-around;
  }
}

@media only screen and (max-width: 1420px) {
  .zr-img-frame {
    max-width: calc(100% - 2rem);
    width: 100%;
  }

  .wrapper {
    max-width: calc(100% - 3rem);
    margin-bottom: 21px;
  }
}

@media (max-width: 1280px) {
  .zr_harmonic {
    padding-inline: unset
  }
}

@media (max-width: 1200px) {
  .section-2 {
    flex-direction: column;
  }

  .section-4 {
    padding-inline: unset !important;
    margin-bottom: 70px !important;
  }

  .zr-feature-img::after {
    width: 100%;
    height: calc(100% + 2rem);
    transform: translateX(-50%) translateY(-43%);
    top: 43%;
  }

  .zr-feature-img::before {
    width: calc(100% + 2rem);
    height: calc(100% + 4rem);
    transform: translateX(-50%) translateY(-37%);
    top: 34%;
  }

  .zr-feature-desc-list .sp-font-xxlarge {
    font-size: 12px !important;
  }

  .section-2 h3,
  .sp-fz-40 {
    font-size: 20px !important;
    text-align: center;
  }

  .zr-feature-desc-list::before {
    margin-right: 7px;
  }

  .zr-feature-desc-list>li::before {
    width: 15px;
    height: 17px;
    background-size: contain !important;
  }

  .zr-feature-desc-list>li {
    height: 17px;
    padding-right: 28px;
  }

}

@media (max-width: 1060px) {
  .zr-answer-container {
    gap: 28px;
  }
}

@media (max-width: 992px) {
  .zr-mt-main {
    margin-top: 2.5rem !important;
  }

  .zr_harmonic {
    padding-inline: 20px;
  }

  .zr_harm_wrapper {
    flex-direction: column;
  }

  .zr_harm_icon .sp-px-7,
  .zr_harm_icon .sp-px-9 {
    padding-left: unset !important;
    padding-right: unset !important;
  }

  .zr_harm_center::after {
    width: 249px;
    height: 148px;
  }

  .zr_harm_icons_right,
  .zr_harm_icons_left {
    gap: 38px;
  }

  .zr_harm_icons_right,
  .zr_harm_icons_left,
  .zr_harm_icons_left .zr_harm_icon:nth-child(2),
  .zr_harm_icons_right .zr_harm_icon:nth-child(2) {
    align-items: center !important;
    align-self: center;
  }

  .zr-bg-icon {
    height: 65px;
    width: 65px;
  }

  .zr-bg-icon>img {
    max-width: 42px;
  }

  .zr-feature {
    flex-direction: column;
  }

  .zr-feature-desc-list {
    max-width: 100%;
    width: 100% !important;
    gap: 28px;
  }

  .zr_harm_icons_right,
  .zr_harm_icons_left {
    padding-bottom: unset !important;
  }

  .bg-cart {
    width: 174px;
    height: 212px;
    left: 5%;
    filter: blur(200px);
  }
}


@media only screen and (max-width: 750px) {
  .zr-main-title {
    font-size: 20px !important;
    line-height: unset;
  }

  .section-1.zr-gap-8 {
    gap: 1.75rem !important;
  }

  .zr-img-frame {
    height: 452px;
    border-radius: 28px;
  }

  .zr-watch {
    width: 174px;
    height: 53px;
    gap: 22px;
    margin-bottom: 20px;
    margin-right: 20px;
  }

  .zr-watch>svg {
    width: 20px;
    height: 20px;
  }

  .zr-img-frame .zr-watch>p {
    font-size: 1rem !important;
  }

  .zr-intro-text {
    font-size: 12px !important;
  }

  .zr-subtitle {
    padding-inline: unset;
  }

  .zr-feature-img {
    max-width: 251px;
    max-height: 206px;
    width: 100% !important;
    margin-right: -36px;
  }
}

@media (max-width: 500px) {
  .sp-font-xxlarge {
    font-size: 12px !important;
  }

  .zr-header-cantainer {
    min-height: unset;
    max-height: 72px !important;
  }

  .zr-img-frame {
    max-width: 100%;
  }

  .zr-subtitle.sp-font-xxlarge {
    font-size: 12px !important;
  }

  .zr-h-50 {
    height: 30px;
    font-size: 8px;
  }

  .section-2 {
    gap: 80px;
    margin-top: 4rem !important;
  }

  .section-2 .zr-gap-12 {
    gap: 12px !important;
  }

  .zr_harm_icon>p {
    width: 118px;
  }

  .zr_harm_icons_left .zr_harm_icon>p {
    width: 149px;
  }

  .zr-answer-box {
    min-height: 189px;
    height: 100%;
  }

  .zr_harm_center {
    height: 155px;
    width: 320px;
  }

  .zr_harm_center img {
    height: 155px;
    width: 320px;
  }
}