:root {
  --primary-1: #7d365fFF;

  --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;
}

.sp-font-xlarge {
  font-size: 18px !important;
}

.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;
}

.sp-lh-2 {
  line-height: 2 !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(--vitrin9);
}

.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: 1540px;
  margin: 0 auto;
  margin-top: 44px;
  margin-bottom: 70px;
}

/* -------------------  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: 5.25rem;
  max-width: 1254px;
  text-align: justify;
}

/* ---------------  section-2   --------------- */
.section-2 {
  max-width: 1285px;
  gap: 100px;
}

.zr-circle-box {
  max-width: 570px;
}

.zr-intro-img {
  transform: matrix(-1.00, 0.00, 0.00, 1.00, 0.00, 0.00);
  max-width: 561px;
  max-height: 484px;
}

.zr-circle-box::before {
  content: '';
  position: absolute;
  max-width: 590px;
  max-height: 590px;
  height: 590px;
  width: 590px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(183, 183, 182, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 14.000000000000002%, rgba(183, 183, 182, 0.4692307692307695) 32%, rgba(255, 255, 255, 0) 48%, rgba(183, 183, 182, 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: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: -70px;
}

.zr-circle-box::after {
  content: '';
  position: absolute;
  max-width: 540px;
  max-height: 540px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(183, 183, 182, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 14.000000000000002%, rgba(183, 183, 182, 0.4692307692307695) 32%, rgba(255, 255, 255, 0) 48%, rgba(183, 183, 182, 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: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: -40px;
}

.zr-intro-text {
  line-height: 2.7;
  max-width: 613px;
  text-align: justify;
}

/* --------------  section-3  -------------- */
.zr-web-cards-wrapper {
  justify-content: center;
}

.zr-web-card {
  background: #f0f0f0FF;
  border: 1px solid #d0d0d0FF;
  max-width: 484px;
  height: 429px;
  width: 100%;
  border-radius: 24px;
}

.zr-wcard-img {
  width: 100%;
  height: 347px;
  position: absolute;
  top: 0;
}

.zr-wcard-img img {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.zr-wcard-buttons {
  align-items: center;
  border-radius: 0 0 1.5rem 1.5rem;
  height: 82px;
  position: absolute;
  bottom: 0;
  background: #fff;
}

.zr-wcard-btns {
  max-width: 250px;
}

.zr-wcard-btns a {
  display: flex;
  align-items: center;
  max-width: 117px;
  height: 50px;
  width: 100%;
  color: #203353FF;
}

.zr-pre-btn {
  background-color: #dcbe5eFF;
}

.zr-wcard-btns-disable {
  background-color: var(--vitrin15) !important;
  color: var(--white) !important;
}

.zr-detail-btn {
  background-color: var(--white);
  border: 1px solid var(--vitrin8);
}

.zr-pre-btn,
.zr-detail-btn,
.zr-wcard-btns-disable {
  font-size: 12px;
}

/* ---------------------  section-4  -------------------- */
.section-4 {
  margin-top: 16rem !important;
}

.zr-phone-img-3 {
  max-width: 529px;
}

.zr-phone-img-3::before {
  content: '';
  position: absolute;
  max-width: 482px;
  max-height: 482px;
  height: 482px;
  width: 482px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(183, 183, 182, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 14.000000000000002%, rgba(255, 255, 255, 0) 28.999999999999996%, rgba(183, 183, 182, 0.4692307692307695) 86%, rgba(183, 183, 182, 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: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: -48px;
}

.zr-phone-img-3::after {
  content: '';
  position: absolute;
  max-width: 529px;
  max-height: 529px;
  width: 529px;
  height: 529px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(183, 183, 182, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 14.000000000000002%, rgba(255, 255, 255, 0) 28.999999999999996%, rgba(183, 183, 182, 0.4692307692307695) 86%, rgba(183, 183, 182, 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: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: -72px;
}

*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}

.zr-app-desc {
  aspect-ratio: 437 / 103;
  max-width: 437px;
  max-height: 103px;
  position: relative;
  padding-inline: 24px;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0px 0px 50px 0px #00000026;
}

.zr-app-desc-list {
  gap: 80px;
  max-width: 501px;
  width: 30%;
}

.zr-app-desc-list.right {
  align-items: flex-end;
}

.zr-app-desc-list.right .zr-app-desc:nth-child(2) {
  align-self: flex-start;
}


.zr-app-desc-list.left {
  align-items: flex-start;
}

.zr-app-desc-list.left .zr-app-desc:nth-child(2) {
  align-self: flex-end;
}


.zr-app-desc>div>img {
  width: 72px;
  height: 72px;
  max-width: 72px;
  max-height: 72px;
}

/* ------------------  section-5  ------------------ */
.section-5 {
  padding-inline: 89px;
}

.zr-feature {
  gap: 80px;
}

.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/OnlineVitrin/icons/polygon.svg") no-repeat;
  width: 28px;
  height: 31px;
}

.zr-feature-desc-list>li>p {
  color: #404040FF;
}

.zr-feature-img {
  max-width: 696px;
  height: 435px;
  object-fit: contain;
}

.zr-feature-img::before {
  content: '';
  position: absolute;
  max-width: 519px;
  max-height: 519px;
  height: 519px;
  width: 519px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(150deg, rgba(183, 183, 182, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 31%, rgba(255, 255, 255, 0) 28.999999999999996%, rgba(183, 183, 182, 0.4692307692307695) 86%, rgba(183, 183, 182, 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: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: -48px;
}

.zr-feature-img::after {
  content: '';
  position: absolute;
  max-width: 569px;
  max-height: 569px;
  width: 569px;
  height: 569px;
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(150deg, rgba(183, 183, 182, 1) 0%, rgba(255, 255, 255, 0.5000000000000001) 31%, rgba(255, 255, 255, 0) 28.999999999999996%, rgba(183, 183, 182, 0.4692307692307695) 86%, rgba(183, 183, 182, 1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -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: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: -72px;
}

/* -----------------  section-6  ------------------ */
.zr_harm_wrapper {
  gap: 68px;
}

.zr_harmonic {
  padding-inline: 47px;
}

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

.zr_harm_center {
  max-width: 719px;
}

.zr_harm_center::after {
  content: "";
  position: absolute;
  width: 834px;
  height: 423px;
  background: #58565180;
  filter: blur(150px);
  z-index: -1;
  top: 24px;
}

.zr_harm_center img {
  max-width: 719px;
  max-height: 356px;
  object-fit: contain;
  border-radius: 20px;
}

.bg-cart {
  max-width: 615px;
  max-height: 364px;
  width: 100%;
  height: 100%;
  position: absolute;
  right: -47px;
  top: -41px;
  background: #4040401A;
  border-radius: 20px;
  z-index: -1;
}

.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: 272px;
  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: 38px;
}

/* ------------------- section-7 ----------------- */
.zr_contact_us_box {
  padding-inline: 158px;
  margin-bottom: 70px;
  border-radius: 32px;
  background: linear-gradient(to top, rgba(230, 242, 255, 1) 1%, rgba(255, 255, 255, 0) 80%);
}

.zr_conus_img {
  padding: 3rem 0;
  width: 56.6%;
}

.zr_conus_img img {
  object-fit: contain;
}

.zr_conus_wrapper {
  gap: 94px;
  margin-bottom: 60px;
  background: unset !important;
}

.zr_conus_form {
  max-width: 424px;
  gap: 24px;
  margin: 0 auto;
  padding: 3.75rem 0;
  width: 43.4%;
}

.zr_conus_form form label {
  margin-right: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--black);
  font-size: 1rem;
  font-weight: 400;
  text-align: right;
}

.zr_conus_form form label:nth-child(3) {
  margin-top: 1.5rem;
}

.zr_conus_form form input {
  border-radius: 12px;
  background-color: var(--white);
  border: 1px solid #5856514D;
  padding-right: 1rem;
  width: 100%;
  height: 48px;
}

.zr_conus_form form button {
  margin-top: 1.5rem;
  border-radius: 200px;
  width: 100%;
  height: 48px;
  color: var(--white);
  font-size: 1rem;
  font-family: "Vazir" !important;
  padding-right: unset !important;
  background: unset !important;
  background-color: var(--dark) !important;
  background-repeat: no-repeat !important;
  background-position: right;
}

.zr_wcard_btns_disable a, .zr_link_disable a, .zr_wcard_btns_disable, .zr_link_disable {
  cursor: not-allowed !important;
}

.zr_wcard_btns_disable {
  background-color: #9e9e9e !important;
  color: var(--white) !important;
}

.zr_link_disable {
  background-color: var(--gray60) !important;
  color: var(--white) !important;
  border: 1px solid var(--gray70) !important;
}

/*responsive*/
@media only screen and (max-width: 1600px) {
  .zr-web-cards-wrapper {
    flex-wrap: wrap;
  }
}

@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;
  }

  .zr_contact_us_box {
    padding-inline: 32px;
  }
}


@media (max-width: 1280px) {
  .zr_conus_wrapper {
    overflow: clip;
  }

  .zr_conus_img {
    margin-right: unset !important;
  }

  .zr_harmonic {
    padding-inline: unset
  }

  .zr_harm_center img {
    max-height: 100%;
    max-width: 100%;
  }
}

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

  .section-4 {
    flex-direction: column;
    align-items: center;
    gap: 4.25rem;
    margin-top: 6rem !important;
  }

  .section-5 {
    padding-inline: unset !important;
  }

  .zr-app-desc-list {
    max-width: 100%;
    width: 100%;
    gap: 40px;
  }

  .zr-phone-img-3 {
    width: calc(100% - 2rem) !important;
  }

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

  .zr-phone-img-3::after {
    top: 69%;
  }

  .zr-feature-img::after {
    top: 70%;
  }

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

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

  .zr-app-desc {
    border-radius: 1.25rem !important;
    max-width: 80% !important;
    height: 96px;
    padding-inline: 12px !important;
    padding-block: 8px !important;
  }

  .zr-app-desc>div {
    padding: unset !important;
  }

  .zr-app-desc .sp-fw-500 {
    font-weight: 400 !important;
    line-height: 2;
  }

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

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

  .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: 15px;
    padding-right: 28px;
  }

  .zr-feature-img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1060px) {
  .zr-web-cards-wrapper>div {
    height: 379px;
  }
}

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

  .zr_harmonic {
    padding-inline: 20px;
  }

  .zr_harm_wrapper {
    flex-direction: column;
  }

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

  .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;
  }

  .bg-cart {
    right: -19px;
    top: -20px;
  }

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

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

  .zr_conus_wrapper {
    flex-direction: column;
    max-width: 560px;
  }

  .zr_conus_img {
    padding: 0;
    width: 100%;
    align-self: flex-end;
  }

  .zr_conus_form {
    margin: 0;
    padding: 0 4.25rem 2rem;
    width: 100% !important;
    max-width: unset !important;
  }

  .zr_contact_us_box {
    padding-inline: 18.5px;
  }
}



@media only screen and (max-width: 750px) {

  .zr-main-title,
  .zr-web-cards-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: 14px !important;
  }

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

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

  .zr_conus_wrapper {
    align-items: center;
    max-width: 100%;
  }

  .zr_conus_img {
    margin-left: -12%;
    width: 120%;
  }

  .zr_conus_form {
    padding: 0 0 2rem;
    max-width: 424px;
  }

  .zr_conus_form form input:last-child,
  .zr_conus_form form input:not(:last-child) {
    height: 34px;
    font-size: 12px !important;
  }
}

@media (max-width: 640px) {
  .zr_conus_form {
    padding: 0 0.5rem 0.5rem;
  }

  .zr_conusf_title p:first-child {
    font-size: 1.25em;
  }

  .zr_conusf_title p:last-child,
  .zr_conus_form form label {
    font-size: 0.75rem !important;
  }

  .zr-app-desc>div>img {
    max-width: 60px;
    max-height: 60px;
  }
}


@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-web-cards-wrapper {
    gap: 28px !important;
  }

  .zr-web-cards-wrapper>div {
    width: 98%;
    height: 271px;
  }

  .zr-wcard-btns {
    max-width: 150px;
  }

  .zr-wcard-btns.zr-gap-4 {
    gap: 8px !important;
  }

  .zr-wcard-buttons {
    height: 52px;
  }

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

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

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

  .zr-circle-box::before {
    transform: translateX(-50%) translateY(-34%);
  }

  .zr_harm_icon>p {
    width: 122px;
  }

  .zr_harm_icon .sp-font-xlarge {
    font-size: 12px !important;
  }

  .zr-wcard-img {
    max-height: 219px ;
    height: 100%;
  }

  .zr-wcard-img img {
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 400px) {
  .zr-phone-img-3::before {
    top: 52%;
  }
}