/*hover*/
@media (min-width: 1025px) {
}

@media (min-width: 2560px) {
}

@media (max-width: 2560px) {
}

@media (max-width: 1920px) {
  .zr_hpic {
    /* transform: rotateX(50deg) rotateZ(30deg) rotateY(-5deg) translateY(50px); */
  }

  .zr_op_cards {
    width: 90%;
  }

  .zr_accordion_box {
    width: 90%;
  }
}

@media (max-width: 1450px){
  .zr_op_card{
  	width: 31%;
  }
  
  .zr_op_cards .zr_op_card:last-child{
  	width: 98%;
  }
}


@media (max-width: 1440px) {
  .zr_header {
    height: 747px;
  }

  .zr_head_texts {
    top: 7%;
  }

  .zr_hpic {
    transform: rotateX(50deg) rotateZ(32deg) rotateY(-5deg) translateY(70px)
      translateX(-40px);
  }

  .zr_hpic3 {
    width: 50%;
  }

  .zr_accordion_box {
    width: 100%;
  }

  .zr_op_cards {
    width: 95%;
  }

  .zr_op_cards .zr_op_card:last-child {
    width: 98%;
  }


  
  .zr_acc_title {
    width: 90%;
    text-align: right;
  }
  
}

@media (max-width: 1280px) {
  .zr_header {
    height: 664px;
  }

  .zr_hpic {
    transform: rotateX(50deg) rotateZ(32deg) rotateY(-5deg) translateY(75px)
      translateX(-125px);
    gap: 48px;
  }

  .zr_hpic1 {
    width: 220px;
    height: 350px;
  }

  .zr_ht_title {
    width: 62%;
    height: 25.9%;
  }

  .zr_ht_title p {
    font-size: 1.75rem;
  }

  .zr_ht_ftitle p {
    font-size: 3.25rem;
  }

  .zr_ht_desc p {
    font-size: 0.75rem;
    line-height: 2.5rem;
  }

  .zr_ht_desc span {
    font-size: 1.25rem;
  }

  .zr_head_pics {
    height: 110%;
  }

  .zr_op_card {
    width: 48%;
  }

  .zr_pages_card {
    width: 47.3%;
  }

  .zr_acc_texts {
    width: 50%;
  }

  .zr_acc_main_title {
    text-align: right;
  }

  .zr_acc_imgs {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  /*body {
    background-color: var(--black);
  }*/

  .zr_header {
    height: 800px;
    overflow: hidden;
  }

  .zr_hback_grad::before {
    opacity: 0.75;
    filter: blur(114px);
    transform: rotate(-65deg);
  }

  .zr_hback_grad::after {
    background-size: 250%;
    transform: translateX(0px);
  }

  .zr_head_texts {
    height: auto;
    top: 60px;
  }

  .zr_ht_title {
    width: 266px;
    height: 81px;
    min-width: unset;
  }

  .zr_ht_title p {
    margin-left: 32px;
    margin-top: 8px;
    font-size: 1.5rem;
  }

  .zr_ht_ftitle p {
    font-size: 2.5rem;
    margin-right: 110px;
  }

  .zr_ht_desc {
    margin-right: 0;
    margin-top: 10px;
    padding: 0 16px;
  }

  .zr_ht_desc p {
    font-size: 0.875rem;
  }

  .zr_ht_desc span {
    font-size: 1.125rem;
  }

  .zr_ht_desc button {
    width: 163px;
    font-size: 0.875rem;
  }

  .zr_hpic {
    transform: rotateX(50deg) rotateZ(30deg) rotateY(-5deg) translateY(230px)
      translateX(0px);
  }

  .zr_hpic1,
  .zr_hpic2 {
    display: none !important;
  }

  .zr_hpic3 {
    width: 100%;
  }

  .zr_top_slider {
    padding-bottom: 64px;
  }
  .zr_tslider_top {
    width: 100%;
    flex-direction: column;
    padding: 0 16px;
    /* align-items: start; */
    gap: 18px;
    margin: 64px 0 36px 0;
  }

  .zr_tslider_top p:first-child,
  .zr_tslider_top p:last-child {
    width: 100%;
    min-width: unset;
    text-align: center;
  }

  .zr_tslider_top p:first-child {
    width: 176px;
    font-size: 1.125rem;
  }

  .zr_tslider_top p:last-child {
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.25rem;
    width: 284px;
  }

  /*.zr_tslider_slider {
    padding: 0;
     padding-right:16px; 
    overflow-x: scroll;
  }*/

  .zr_ts_slide {
    max-width: 88.8vw;
    min-width: unset;
    gap: 16px;
    margin: 0;
    margin-right: 16px;
  }

  .zr_ts_slide:last-child {
    margin-left: 16px;
  }

  .zr_tss_card_top {
    padding: 16px 18px 8px;
  }
  
  .zr_tss_card_top img{
  	width: 100% !important;
  }

  .zr_tss_card_bottom {
    width: 88%;
    font-size: 0.75rem;
    line-height: 1.25rem;
  }

  .zr_tss_card_top p {
    font-size: 0.875rem;
    line-height: 24px;
  }

  .zr_tslider_track {
    gap: 1rem;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  /*pages*/

  .zr_pages_sample {
    /* background-color: var(--black); */
    padding-bottom: 114px;
    overflow: clip; /*temp*/
  }

  .zr_pages_card::before {
    margin-right: -18px;
    bottom: -4px;
  }

  .zr_pages_cards {
    width: 100%;
    overflow-x: scroll;
    /* margin-right: 16px;
    padding-right: 4px; */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .zr_pages_cards::-webkit-scrollbar,
  .zr_pages_box::-webkit-scrollbar,
  .zr_tslider_track::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .zr_pages_box {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: flex-start !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* scroll-snap-type: x mandatory; */
    scroll-behavior: smooth;
    margin: unset;
  }

  .zr_pages_card {
    flex: 0 0 74.7vw;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .zr_pages_card:first-child {
    margin-right: 16px;
  }

  .zr_pages_card:last-child {
    margin-left: 16px;
  }

  .zr_pages_title {
    font-size: 1.125rem;
    padding: 114px 0 32px 0;
  }

  .zr_option_cards {
    /* background-color: var(--black); */
    padding-bottom: 64px;
  }

  .zr_pages_card {
    width: 74.7vw;
    max-width: 268.89px;
    aspect-ratio: 1.28 / 1;
    padding: 18px 18px 0;
    border-radius: 6px;
  }

  .zr_pages_card img {
    margin-bottom: -8px;
  }

  .zr_pages_card p {
    font-size: 1rem;
    bottom: 12px;
  }

  .zr_accordion_box {
    flex-direction: column-reverse;
    background-color: unset;
    border: unset;
    border-radius: unset;
    padding: unset;
    margin: unset;
  }

  .zr_accordion {
    padding: 32px 0;
  }

  .zr_acc_title {
    width: 100%;
    line-height: 2rem;
  }

  .zr_acc_imgs,
  .zr_acc_texts {
    width: 100%;
  }

  .zr_acc_imgs {
    padding: 0 16px;
    align-items: center;
  }

  .zr_acc_img {
    max-width: 650px;
  }

  .zr_acc_texts {
    align-items: center;
  }

  .zr_acc_main_title {
    text-align: center;
    width: 100%;
    font-size: 1.125rem;
    line-height: 2.25rem;
    margin: 16px 0;
  }

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

  .zr_acc_desc {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .zr_op_cards {
    width: 100%;
    padding: 0 16px;
    gap: 24px;
  }

  .zr_op_card,
  .zr_op_cards .zr_op_card:last-child {
    /* width: 100%; */
    /* max-width: 465px; */
    /* max-height: unset; */
    font-size: 0.875rem;
    padding: 12px 24px;
  }

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

  .zr_contact_us {
    background: linear-gradient(180deg, var(--bg-color) 0%, var(--white) 100%);
  }

  .zr_conus_form {
    width: 100%;
    max-width: 465px;
    padding: 3.7% 2.5%;
    border: 2px solid var(--E1P-2);
    border-radius: 32px;
  }

  .zr_ftitle {
    font-size: 1.125rem;
  }

  .zr_fdesc {
    font-size: 0.75rem;
  }

  .zr_spacer {
    height: 100px;
  }
}

@media (max-width: 960px) {
  .zr_hpic {
    transform: rotateX(50deg) rotateZ(30deg) rotateY(-5deg) translateY(300px)
      translateX(20px);
  }
}

@media (max-width: 720px) {
  .zr_op_card,
  .zr_op_cards .zr_op_card:last-child {
    width: 100%;
  }
  
}

@media (max-width: 640px) {
  .zr_hpic {
    transform: rotateX(50deg) rotateZ(30deg) rotateY(-5deg) translateY(375px)
      translateX(70px);
  }
}

@media (max-width: 1440px) {
  .zr_top_btn_box {
    width: 60vw;
  }
}

@media (max-width: 1024px) {
  .zr_top_btn_box {
    width: 50vw;
    border: 1px solid var(--light-gray);
  }
  
  .zr_top_botton_wrapper{
  	bottom: 35px;
  }
}

@media (min-width: 960px) and (max-width: 1024px) {
  .zr_top_btn_box {
    height: 50px;
  }

  .zr_top_btn_box button {
    font-size: 0.875rem;
  }
}

@media (min-width: 720px) and (max-width: 960px) {
  .zr_top_btn_box {
    width: 50vw;
    height: 50px;
  }

  .zr_top_btn_botton {
    width: 40%;
  }

  .zr_top_btn_box button,
  .zr_top_btn_box p {
    font-size: 0.875rem;
  }
}

@media (min-width: 640px) and (max-width: 720px) {
  .zr_top_btn_box {
    width: 50vw;
    height: 50px;
  }

  .zr_top_btn_botton {
    width: 40%;
  }
  .zr_top_btn_box button,
  .zr_top_btn_box p {
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .zr_top_btn_box {
    width: 73vw;
  }

  .zr_top_botton_wrapper {
    justify-content: end !important;
    margin-left: 10px;
  }

  .zr_head_texts {
    width: 100%;
    min-width: unset;
  }

  .zr_ht_ftitle p {
    text-align: center;
    width: 100%;
    margin-right: unset;
  }

  .zr_ht_desc {
    width: 100%;
    text-align: center;
  }

  .zr_top_btn_botton {
    width: 45%;
    max-width: 136px;
  }

  .zr_top_btn_box button {
    font-size: 0.75rem;
  }

  .zr_top_btn_box p {
    font-size: 0.75rem;
  }

  .zr_top_btn_box {
    width: 73vw;
    height: 50px;
  }

  .zr_tslider_top {
    align-items: center;
  }

  .zr_tslider_top p {
    text-align: center;
  }
  
  
}

@media (max-width: 400px){

}