:root {
  /*primary colors*/
  --white: #ffffff;
  --E1P-1: #f9f9f9;
  --E1P-2: #dcdcdc;
  --E1P-3: #334240;
  --E1P-4: #beb7b3;
  --E1P-5: #f8fbff;
  --E1P-6: #e6f2ff;
  --E1P-7: #c5c5c5;
  --E1P-8: #e8e8e8;
  --E1P-9: #f1e9d9;
  --E1P-10: #d9f1ed;
  --E1P-11: #e1d9f1;
  --E1P-12: #f1e1d9;
  --black: #000000;

  --bg-color: #252626;
  --light-gray: #767676;
  --back-gray: #3b3b3b;
  --text-gray: #272727;
  --title-back: #f2cd87;
  --timer: #f1cc87;
  --blue: #004999;
  --green: #87f2d4;
  --fbtn: #203353;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  position: relative;
}

footer {
  background-color: var(--white);
}

.zr_top_botton_wrapper {
  direction: rtl;
  bottom: 28px;
  z-index: 49;
  justify-self: center;
}

.zr_top_btn_box {
  width: 44vw;
  background: var(--fbtn);
  opacity: 0.8;
  height: 65px;
  color: white;
  align-items: center;
  border-radius: 999px;
  padding: 0 24px 0 8px;
  max-width: 838px;
  z-index: 99;
  font-family: "Vazir";
}

.zr_top_btn_box p {
  color: var(--white);
}

.zr_top_btn_box button {
  background-color: var(--white);
  opacity: 1;
  color: var(--black);
  height: 100%;
  border-radius: 999px;
  font-size: 1.125rem;
  width: 100%;
  font-family: "Vazir";
  z-index: 99;
  cursor: pointer;
}

.zr_top_btn_botton {
  width: 28%;
  height: 76%;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.zr_top_btn_animate {
  width: 55%;
  height: 100%;
  background: linear-gradient(
    289.04deg,
    #ffffff00 26.02%,
    #c0d0d0 48.66%,
    #ffffff00 71.3%
  );
  opacity: 0.5;
  transform: skew(-20deg) translateX(105%);
  transition: transform 0.5s ease;
}

.zr_top_btn_botton:hover .zr_top_btn_animate {
  transform: skew(-20deg) translateX(-190%);
}

/*header*/
.zr_header {
  width: 100%;
  height: 996px;
  overflow-y: hidden;
}

.zr_head_texts {
  width: 26.6%;
  min-width: 510px;
  height: 377px;
  top: 16%;
  z-index: 35;
}

.zr_ht_title {
  background-color: var(--title-back);
  width: 69%;
  height: 28.9%;
  min-width: 273px;
  clip-path: polygon(8.3333% 23.3945%, 100% 0%, 100% 100%, 0% 78.4404%);
  align-items: center;
}

.zr_ht_title p {
  text-align: left;
  font-size: 2rem;
  letter-spacing: 1em;
  line-height: 100%;
  text-transform: uppercase;
  margin-left: 56px;
  margin-top: 18px;
}

.zr_ht_ftitle p {
  font-size: 4rem;
  margin-right: 22.2%;
  color: var(--white);
}

.zr_ht_desc {
  margin-top: 4px;
  margin-right: 22.2%;
  gap: 1rem;
}

.zr_ht_desc p {
  font-size: 1rem;
  line-height: 3rem;
  color: var(--white);
}

.zr_ht_desc span {
  display: block;
  font-size: 1.5rem;
}

.zr_ht_desc button {
  width: 181px;
  height: 48px;
  background-color: var(--white);
  border: 1px solid var(--E1P-4);
  border-radius: 8px;
  display: none !important;
}

.zr_head_pics {
  /* background-color: blue; */
  height: 100%;
  align-items: end;
  overflow: hidden;
  /* margin-right: 13%; */
}

.zr_hback_grad {
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
  left: 0;
  top: 0;
  /* transform: translateX(7%) translateY(24%); */
}

.zr_hback_grad::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--E1P-3);
  opacity: 0.5;
  filter: blur(242.3px);
  border-radius: 50%;
  z-index: 1;
  transform: rotate(-142.92deg);
}

.zr_hback_grad::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/themes/website/presentation/onyx/img/hero-pattern.webp")
    center/cover no-repeat;
  z-index: 2;
  opacity: 0.8;
  transform: translateX(-90px) rotateZ(-2deg);
}

.zr_hpic {
  gap: 75px;
  height: 100%;
  width: 100vw;
  transform: rotateX(50deg) rotateZ(27.5deg) rotateY(-5deg) translateY(133px)
    translateX(-222px);
  justify-content: end;
  z-index: 10;
}

.zr_hpic1,
.zr_hpic2,
.zr_hpic3 {
  z-index: 3;
  /* transform: rotateX(50deg) rotateY(-8deg) rotateZ(35deg); */
}

.zr_hpic1 {
  /* width: 13%; */
  width: 260px;
  height: 410px;
  /* aspect-ratio: 1 / 1.32; */
  margin-top: 220px;
  box-shadow: 0px 5.83px 11.66px 0px #00000054,
    0px 20.99px 20.99px 0px #00000047, 0px 47.81px 29.15px 0px #0000002b,
    0px 85.12px 33.81px 0px #0000000d, 0px 134.09px 37.31px 0px #00000003;
}

.zr_hpic1 img {
  height: 100%;
}

.zr_hpic2 {
  width: 13%;
  margin-top: 140px;
  box-shadow: 0px 5px 10px 0px #00000054, 0px 18px 18px 0px #00000047,
    0px 41px 25px 0px #0000002b, 0px 73px 29px 0px #0000000d,
    0px 115px 32px 0px #00000003;
}

.zr_hpic3 {
  width: 65%;
  box-shadow: 0px 5px 10px 0px #00000054, 0px 18px 18px 0px #00000047,
    0px 41px 25px 0px #0000002b, 0px 73px 29px 0px #0000000d,
    0px 115px 32px 0px #00000003;
}

.zr_hpic3 {
  backface-visibility: hidden;
}

.zr_hpic3 {
  animation: picMove 3.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes picMove {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(4px, 4px, 4px);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.zr_top_slider {
  position: relative;
  width: 100%;
  align-items: center;
  padding-bottom: 52px;
  background-color: var(--white);
}

.zr_tslider_top {
  width: 920px;
      justify-self: center;
  align-items: center;
  margin: 48px 0;
  /*position: absolute;
    top: 0;
      position: sticky;
    top: 135px;
    right: 50%;
    transform: translateX(50%);*/
}

.zr_tslider_top span {
  color: var(--E1P-3);
}

.zr_tslider_top p:first-child {
  width: 220px;
  /* min-width: 296px; */
  font-size: 1.5rem;
}

.zr_tslider_top p:last-child {
  width: 384px;
  /* min-width: 384px; */
  font-size: 1rem;
  line-height: 2rem;
  margin: 16px 0;
}

/*.zr_tslider_slider {
  width: 100%;
  gap: 32px;
   padding: 0 64px; 
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}*/

.zr_tslider_slider::-webkit-scrollbar {
  display: none;
}

.zr_tslider_track {
  display: flex;
  /* gap: 32px; */
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /*margin-right: 45vw;*/
}

.zr_ts_slide {
  /* width: 44%;
    min-width: 844px;
    max-width: 844px; */
  align-items: center;
  gap: 16px;
  margin: 0 16px;
}

.zr_tss_card_top {
  background-color: var(--E1P-1);
  gap: 16px;
  padding: min(48px, 2.5vw) min(101px, 5.3vw) min(64px, 3.3vw);
  padding-bottom: 16px;
  border: 1px solid var(--E1P-2);
  border-radius: 16px;
  width: clamp(320px, 44vw, 842px);
}

.zr_tss_card_top img {
  max-height: 317px;
  object-fit: cover;
  width: clamp(283px, 34vw, 640px);
}

.zr_tss_card_top p {
  font-size: 1rem;
  text-align: center;
}

.zr_tss_card_bottom {
  width: 100%;
  font-size: 1rem;
  width: 427px;
  text-align: center;
  line-height: 2rem;
}

/*pages sample*/
.zr_pages_sample {
  width: 100%;
  align-items: center;
  padding-bottom: 64px;
}

.zr_pages_title {
  width: 100%;
  padding: 4rem 0;
  text-align: center;
  color: var(--white);
  font-size: 2rem;
}

.zr_pages_box {
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: min(3.3vw, 64px);
  width: 100%;
  max-width: 1440px;
  margin: 0 3rem;
}

.zr_pages_cards{
	width: 100%;
}

.zr_pages_card {
  padding: 48px 48px 0;
  width: 47.7%;
  aspect-ratio: 1.24 / 1;
  max-height: 551.3px;
  max-width: 688px;
  background-color: var(--back-gray);
  border: 1px solid var(--light-gray);
  border-radius: 16px;
  overflow: hidden;
}

.zr_pages_card::before {
  content: "";
  position: absolute;
  margin-right: -48px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(59, 59, 59, 0) 50%,
    var(--back-gray) 100%
  );
  z-index: 10;
}

.zr_pages_card img {
  /*margin-bottom: -24px;*/
  position: absolute;
    bottom: 0;
    left: 50%;
    /* scale: 1; */
    transform: translateX(-50%);
    width: 90%;
}

.zr_pages_card p {
  text-align: center;
  transform: translateY(-24px);
  z-index: 10;
  color: var(--white);
  font-size: 1.125rem;
  
      position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
}

/*accordion*/
.zr_accordion {
  width: 100%;
  background-color: var(--white);
  padding: 116px 0;
}

.zr_accordion_box {
  width: 78.35%;
  border-radius: 32px;
  padding: 32px;
  gap: 32px;
  background-color: var(--E1P-1);
  border: 1px solid var(--E1P-2);
  margin: 0 32px;
  max-width: 1440px;
}

.zr_acc_texts {
  width: 43%;
  align-items: flex-start;
  justify-content: flex-start;
}

.zr_acc_imgs {
  width: 57%;
}

.zr_acc_img {
  max-width: 797px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--E1P-8);
  border-radius: 16px;
}

.zr_acc_main_title {
  font-size: 2rem;
  width: 346px;
  /* text-align: center; */
  line-height: 4rem;
  margin: 32px 0;
}

.zr_accordion_wrapper {
  width: 100%;
  height: auto;
  padding: 12px 16px;
}

.zr_acc_item hr:first-child {
  width: 100%;
  height: 1px;
  background-color: var(--E1P-7);
}

.zr_acc_item:first-child > hr:first-child {
  display: none !important;
  position: relative;
  z-index: 5;
  background-color: var(--back-gray);
  border: none !important;
}

.zr_acc_title {
  height: 64px;
  margin: 16px 0;
  align-items: center;
}

.zr_acc_title p {
  font-size: 1.125rem;
}

.zr_acc_desc {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 16px;
}

.zr_acc_item hr:last-child {
  position: relative;
  width: 100%;
  height: 3px;
  background-color: var(--back-gray);
  margin: 20px 0 !important;
  z-index: 10;
}

/*option cards*/
.zr_option_cards {
  width: 100%;
  padding-top: 64px;
  padding-bottom: 40px;
  gap: 64px;
  align-items: center;
  overflow: hidden;
}

.zr_marquee,
.zr_mq_top,
.zr_mq_bottom {
  gap: 32px;
}

.mq_card {
  padding: 8px 16px;
  gap: 16px;
  align-items: center;
  border-radius: 12px;
  background-color: var(--back-gray);
  filter: blur(25);
}

.mq_card p {
  font-size: 1rem;
  color: var(--white);
}

/*marquee*/
.zr_marquee {
  overflow: hidden;
  position: relative;
}

.mq_card img {
  height: 29px !important;
  width: auto;
}

.zr_mq_top,
.zr_mq_bottom {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  width: max-content;
  will-change: transform;
  cursor: grab;
}

.zr_mq_top:active,
.zr_mq_bottom:active {
  cursor: grabbing;
}

.mq_card {
  flex: 0 0 auto;
}

/*end marquee*/

.zr_op_cards {
  flex-direction: row-reverse;
  width: 75%;
  max-width: 1440px;
  flex-wrap: wrap;
  gap: 32px;
}

.zr_op_card {
  background-color: var(--back-gray);
  color: var(--white);
  width: 31.7%;
  border-radius: 16px;
  aspect-ratio: 1.76 / 1;
  max-height: 260px;
  padding: 16px 32px;
  font-size: 1.125rem;
  overflow: hidden;
}

.zr_op_card p {
  z-index: 5;
  position: relative;
}

.zr_op_card::before {
  content: "";
  inset: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.zr_op_card1::before {
  background: url(/themes/website/presentation/onyx/img/card-1.webp)
    center/cover no-repeat;
}

.zr_op_card2::before {
  background: url(/themes/website/presentation/onyx/img/card-2.webp)
    center/cover no-repeat;
}

.zr_op_card3::before {
  background: url(/themes/website/presentation/onyx/img/card-3.webp)
    center/cover no-repeat;
}

.zr_op_card4::before {
  background: url(/themes/website/presentation/onyx/img/card-4.webp)
    center/cover no-repeat;
}

.zr_op_card5::before {
  background: url(/themes/website/presentation/onyx/img/card-5.webp)
    center/cover no-repeat;
}

.zr_op_card6::before {
  background: url(/themes/website/presentation/onyx/img/card-6.webp)
    center/cover no-repeat;
}

.zr_op_card7::before {
  background: url(/themes/website/presentation/onyx/img/card-7.webp)
    center/cover no-repeat;
}

.zr_op_cards .zr_op_card:last-child {
  width: 100%;
  font-size: 2rem;
  padding: 26px 56px;
}

/*contact us*/
.zr_contact_us {
  width: 100%;
  max-width: unset;
  background: linear-gradient(180deg, var(--bg-color) 0%, var(--white) 100%);
  padding: 0 16px;
}

.zr_conus_form {
  width: 636px;
  height: auto;
  border: 5px solid var(--E1P-2);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--E1P-5) 0%, var(--E1P-6) 100%);
  padding: 64px 108px;
}

.zr_ftitle {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 16px;
}

.zr_fdesc {
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  margin-bottom: 32px;
}

.zr_conus_form form label {
  font-size: 1rem;
  padding-right: 16px;
  padding-bottom: 4px;
  color: var(--text-gray);
}

.zr_conus_form form input {
  background-color: var(--white);
  width: 100%;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 1px rgba(2, 44, 34, 0.13),
    0px 1px 2px 0px rgba(2, 44, 34, 0.08);
  margin-bottom: 24px;
  padding-right: 16px;
}

.zr_conus_form form input[type="submit"] {
  background: unset !important;
  background-color: var(--dark) !important;
  border-radius: 999px;
  color: var(--white);
  margin-top: 8px;
  margin-bottom: 0;
  padding-right: 0 !important;
  font-family: "Vazir";
  font-size: 20px;
}

/*spacer*/
.zr_spacer {
  width: 100%;
  height: 148px;
  margin-top: -4px;
  background-color: var(--white);
}

.zr_hscroll {
  position: relative;
  /*height: 250vh;*/
  /*background: #f9f9f9;*/
}

.zr_hscroll__sticky {
  /*position: sticky;*/
  /*top: 0;*/
  top: 70px;
  /*height: 100vh;*/
  width: 100%;
  overflow: scroll;
  display: flex;
  align-items: center;
}

.zr_tslider_track {
  display: flex;
  /*will-change: transform;*/
  /*padding: 0 50px;*/
}

.zr_top_slider {
    position: relative !important;
    width: 100% !important;
    align-items: center !important;
    padding-bottom: 52px !important;
    background-color: var(--white) !important;
}

.zr_tslider_top {
    width: 920px;
    align-items: center;
    margin: 48px 0;
}

.zr_tslider_top p:first-child {
    width: 220px;
    /* min-width: 296px; */
    font-size: 1.5rem;
}

.zr_tslider_top p:last-child {
    width: 384px;
    /* min-width: 384px; */
    font-size: 1rem;
    line-height: 2rem;
    margin: 16px 0;
}

.zr_tslider_slider {
    width: 100%;
    gap: 32px;
    /* padding: 0 64px; */
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.zr_tslider_track {
    display: flex;
    /* gap: 32px; */
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.zr_ts_slide {
    align-items: center;
    gap: 16px;
    margin: 0 16px;
}

.zr_tss_card_top {
    background-color: var(--E1P-1);
    gap: 16px;
    padding: min(48px, 2.5vw) min(101px, 5.3vw) min(64px, 3.3vw);
    padding-bottom: 16px;
    border: 1px solid var(--E1P-2);
    border-radius: 16px;
    width: clamp(320px, 44vw, 842px);
}

.zr_tss_card_top img {
    max-height: 317px;
    object-fit: cover;
    width: clamp(283px, 34vw, 640px);
}

.zr_tss_card_top p {
    font-size: 1rem;
    text-align: center;
}

.zr_tss_card_bottom {
    width: 100%;
    font-size: 1rem;
    width: 427px;
    text-align: center;
    line-height: 2rem;
}