/* firago-latin-300-normal */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-300-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-300-normal.woff) format('woff');
}

/* firago-latin-400-normal */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-400-normal.woff) format('woff');
}

/* firago-latin-500-normal */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-500-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-500-normal.woff) format('woff');
}

/* firago-latin-600-normal */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-600-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-600-normal.woff) format('woff');
}

/* firago-latin-700-normal */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-700-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-700-normal.woff) format('woff');
}

/* firago-latin-800-normal */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-800-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-800-normal.woff) format('woff');
}

/* firago-latin-900-normal */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-900-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/firago@latest/latin-900-normal.woff) format('woff');
}

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

body{
    font-family: 'FiraGO', sans-serif;
    overflow: hidden;
}


a{
    text-decoration: none;
}

p{
    margin-bottom: 0;
}

.language{
    position: fixed;
    top: 50px;
    right: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 7px;
    border-radius: 4px;
}

.language > span{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.additional_links{
    position: fixed;
    top: 50px;
    left: 56px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.home_6{
    z-index: -1;
}

.card-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 30px;
    width: 500px;
    margin: 0 auto;
    padding: 100px 10px;
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.flipped + .page{
    z-index: 10;
}

/* Book container styles */
.book-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 30px;
  }
  
  /* Tab styles */
  .tabs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 100;
    justify-content: space-between;
    width: 80%;
    position: absolute;
    top: 50px;
    left: 10%;
  }

  .tabs-bottom{
    top: unset;
    bottom: 50px;
  }
  
  .tab {
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }

  .book {
    position: relative;
    width: 300px;
    height: 480px;
    transform-style: preserve-3d;
    perspective: 1500px;
    transform: rotate(90deg) translateX(160px);
  }
  
  .page {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 1s ease;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
  }
  
  .page.flipped {
    transform: rotateY(-180deg);
  }
  
  .page-front,
  .page-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    backface-visibility: hidden;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #262626;
    border-radius: 16px;
  }
  .page-front{
    border-left: unset;
  }

  .book:before{
    content: '';
    position: absolute;
    top: -5px;
    left: -10px;
    width: 18px;
    height: 22px;
    background-image: url(/assets/images/holder_right.svg);
    border-radius: 6px;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
  }

  .book:after{
    content: '';
    position: absolute;
    bottom: -5px;
    left: -10px;
    width: 18px;
    height: 22px;
    background-image: url(/assets/images/holder_left.svg);
    border-radius: 6px;
    z-index: -1;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
  }
  .page-back {
    transform: rotateY(180deg);
  }

  .page-card-title{
    position: absolute;
    border: 3px solid #000;
    width: 156px;
    height: 32px;
    border-radius: 12px;
    left: -82px;
    z-index: 999;
    background: #000000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform: rotate(-90deg);
    opacity: 0;
  }

  .page-card-title.special{
    background: #000000;
    color: #fff;
  }

  .page-card-title.active{
    animation: fade 0.3s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1.0s;
  }

  .page-card-title.active > p{
    animation: fade 0.6s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
  }

  @keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
  }

  @keyframes slide-right{
    0%{
        transform: translateX(-200px);
    }
    100%{
        transform: translateX(0);
    } 
  }
  
  .page-card-title > p{
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    opacity: 0;
  }

  /* Page content styles */
  .page-content {
    text-align: center;
    padding: 30px;
    transform: rotate(-90deg);
    min-width: 480px;
    /* height: 80%; */
    height: calc(100% - 120px);

    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .page-content .swiper{
      width: 100%;
  }
  
  .page-number {
    position: absolute;
    bottom: 20px;
    font-size: 12px;
  }
  
  .page-front .page-number {
    right: 20px;
  }
  
  .page-back .page-number {
    left: 20px;
  }
  
  /* Add a subtle gradient to make the page fold more realistic */
  /*.page::after {*/
  /*  content: '';*/
  /*  position: absolute;*/
  /*  top: 0;*/
  /*  right: 0;*/
  /*  width: 10px;*/
  /*  height: 100%;*/
  /*  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1));*/
  /*  transform-origin: right;*/
  /*  transition: all 0.3s ease;*/
  /*}*/
  
  /*.page.flipped::after {*/
  /*  transform: rotateY(180deg);*/
  /*  background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.1));*/
  /*} */


  .home_1_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .scrollex-logo{
    width: 60px;
  }

 .scrollex-title{
    text-align: left;
    font-size: 20px;
    font-weight: 700;
  }

  .home_1_content{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .scrollex-sub{
    text-align: justify;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    display: block;
  }
  
   div.scrollex-sub * {
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
    /*display: block;*/
   }
  
  .home_7_footer img{
      height: 130px;
  }

  .home_1_header_2{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
  }

  .home_1_content_2{
    margin-top: 20px;
  }

  .home_1_footer_2{
    margin-top: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }

  .download_links{
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
  }

  .home_2_center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
  }

  .scrollex-bold{
    font-weight: 700;
    font-size: 16px;
    text-align: left;
  }


  .home_2_header li{
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
  }

  .home_2_header ul{
    padding-left: 30px;
    margin-top: 20px;
  }

  .scrollex-sub-gray{
    color: #8C8C8C;
    font-size: 16px;
    font-weight: 400;
    margin-top: 4px;
  }

  .home_4 .scrollex-logo img{
    width: 34px;
  }
  
  .home_7 .scrollex-logo img{
      width: 54px;
  }
  
  .home_4_content{
      margin-top: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .f_item_text{
      display: none;
      text-align: left;
  }
  
  .f_item_text:nth-child(1){
      display: block;
  }

  .flex-list{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .scrollex-list{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    text-align: left;
  }

  .home_7_content{
    margin: 20px 0;
  }


  .home_7_footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
  }

  .page-content p > a{
    text-decoration: underline;
    color: #000;
  }

  .home_8_center{
    width: 90%;
    margin: 0 auto;
  }

  .home_8_center p{
    text-align: center;
  }

  .home_8_header > *{
    text-align: center !important;
  }

  .home_8_header > p{
    margin-top: 16px;
  }
  
  .partnerSwiper{
      margin: 20px 0;
      width: 100%;
  }
  
  .partnerSwiper1{
      transform: rotate(180deg);
  }
  
  .partnerSwiper1 img{
      transform: rotate(180deg);
  }

  .home_8_gallery{
    /*display: grid !important;*/
    /*align-items: flex-start;*/
    /*grid-template-columns: repeat(3, 1fr);*/
    /*gap: 16px;*/
    width: 33% !important;
  }

  .home_8_gallery a{
    border: 1px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*flex: 0 0 33%;*/
    overflow: hidden;
  }

 .home_8_gallery a img{
     width: 100%;
     height: 48px;
     object-fit: contain;
 }

  .flex-tabs{
    width: 100%;
    border: 2px solid #262626;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
  }

  .flex-tab{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
  }

  .flex-tab.active{
    background: #262626;
    color: #fff;
  }

  .flex-list ul{
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    flex: 1;
  }

  .flex-list ul li{
    font-size: 16px;
    font-weight: 400;
    text-align: left;
  }

  .flex-table{
    width: 100%;
    border: 2px solid #262626;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
  }

  .flex-table-tab{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    flex: 1;
    font-weight: 400;
    text-align: left;
  }

  .flex-table-body{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
  }

  .flex-table-body-item{
    flex: 1;
    display: flex;
    align-items: center;
    text-align: left;
    padding-left: 16px;
    padding: 15px;
  }

  .flex-table-body-item > p{
    font-size: 14px;
    font-weight: 400;
  }

  .scrollex-list.active{
    font-size: 16px;
    font-weight: 700;
    text-align: left;
  }

  .home_5_center{
    display: none;
  }

  .faq-content1{
    display: block;
  }

  .home_6_cards{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    border: 3px solid #000;
    border-radius: 6px;
    position: relative;
    width: 90%;
    margin: 0 auto;
  }

  .home_6_cards label{
    position: absolute;
    top: -12px;
    left: 12px;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    width: 82px;
    height: 22px;
  }

  .home_6_cards_item, .home_6_cards_item_color{
    position: relative;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .home_6_cards_item.active, .home_6_cards_item_color.active{
    border-color: #000;
  }

  .home_6_cards_item.active::before, .home_6_cards_item_color.active::before{
    content: '';
    position: absolute;
    top: -7px;
    right: -10px;
    width: 12px;
    height: 12px;
    background-image: url(/assets/images/icons/check.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 999;
  }

  .home_6_cards_item > img{
    opacity: 0.7;
  }

  .home_6_cards_colors{
    margin-top: 20px;
  }




  .home_3_content-2, .home_3_content-3{
    display: none;
  }

  .home_3_content-2 .flex-table-tab, .home_3_content-3 .flex-table-tab{
    justify-content: center;
  }

  .home_3_content-2 .flex-table-body-item span, .home_3_content-3 .flex-table-body-item span{
    font-weight: 700;
  }

  .tab-2, .tab-3{
    display: none;
  }


.home_3_content {
    justify-content: flex-start;
}

.flex-table-body:nth-child(odd){
    background-color: #F4F4F4;
}

.home_6_center{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}





.img-1{
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(400%);
    transition: all;
}

@keyframes img-1{
    0%{
        transform: translateY(400%);
    }
    100%{
        transform: translateY(0);
    }
} 

.img-1.active{
    animation: img-1 1s ease-in-out forwards;
    animation-delay: 0.3s;
}

@keyframes img-1-1{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(400%);
    }
}


.img-1.hide{
    animation: img-1-1 .3s ease-in-out forwards;
}

.img-1 img{
    width: 400px;
}

.img-2{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(400%);
    transition: all;
}

.img-2.active{
    animation: img-2 1s ease-in-out forwards;
    animation-delay: 0.3s;  
}

@keyframes img-2{
    0%{
        transform: translateY(-50%) translateX(400%);
    } 
    100%{
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes img-2-2{
    0%{
        transform: translateY(-50%) translateX(0);
    }
    100%{
        transform: translateY(-50%) translateX(400%);
    }
}

.img-2.hide{
    animation: img-2-2 .3s ease-in-out forwards;
}


@keyframes img-3{
    0%{
        transform: translate(-500%, 400%);
    }
    100%{
        transform: translate(-30%, -50%);
    }
} 


@keyframes img-3-1{
    0%{
        transform: translate(-30%, -50%);
    }
    100%{
        transform: translate(-500%, 400%);
    }
}

.page-n-1 > .img-1.active, .page-n-5 > .img-1.active, .page-n-7 > .img-1.active{
    animation: img-3 1s ease-in-out forwards;
    animation-delay: 0.3s;
}


.page-n-1 > .img-1.hide, .page-n-5 > .img-1.hide, .page-n-7 > .img-1.hide{
    animation: img-3-1 .3s ease-in-out forwards;
}

.page-n-1 .img-1,.page-n-7 .img-1, .page-n-5 .img-1{
  left: 20px;
  top: 50%;
  cursor: pointer;
  display: flex;
  align-items:center;
  width: calc((100% - 580px) / 2 - 40px);
}

.page-n-1 .img-1 > img, .page-n-5 .img-1 > img, .page-n-7 .img-1 > img{
  width: 90%;
  object-fit: contain;
}

.page-n-1 .img-2 > img{
  height: 500px;
}

.page-n-2 .img-1 > img{
    width: 600px;
}

.page-n-2 .img-2{
    right: 180px;
}

.page-n-2 .img-2 >img{
    width: 250px;
}


.page-n-3 .img-1{
    bottom: 20%;
    left: 160px;
}

.page-n-3 .img-1 > img{
    width: 340px;
}

.page-n-3 .img-2{
    top: 60%;
    right: 0;
}

.page-n-3 .img-2 >img{
    width: 450px;
}








/*.page-n-5 .img-1{*/
/*    left: 2%;*/
/*        cursor: pointer;*/
/*}*/

/*.page-n-5 .img-1 > img{*/
/*    width: 860px;*/
/*}*/

.page-n-5 .img-2{
    top: 600px;
    right: 180px;
}

.page-n-5 .img-2 >img{
    height: 600px;
}





.page-n-6 .img-1{
    left: 160px;
}

.page-n-6 .img-1 > img{
    width: 180px;
}

.page-n-6 .img-2, .page-n-4 .img-2{
    top: 70%;
    right: 4%;
}

.page-n-4 .img-2>img{
    height: 420px;
}

.page-n-6 .img-2 >img {
    height: 680px;
}






/*.page-n-7 .img-1{*/
/*        cursor: pointer;*/
/*}*/

/*.page-n-7 .img-1 > img{*/
/*    width: 840px;*/
/*}*/

.page-n-7 .img-2{
    top: 600px;
    right: 2%;
}

.page-n-7 .img-2 >img{
    height: 600px;
}




.page-n-8 .img-1, .page-n-4 .img-1{
    left: 80px;
}

.page-n-8 .img-1 > img{
    width: 540px;
}

 .page-n-4 .img-1 > img{
    width: 600px;
}

.page-n-8 .img-2{
    right: 160px;
}

.page-n-8 .img-2 >img{
    width: 430px;
}






.book_stripes{
    top: 140px;
    position: absolute;
    width: 420px;
}

.book_stripes img, .book_stripes_bottom img{
    width: 100%;
}

.book_stripes_bottom{
    /*bottom: 120px;*/
    width: 420px;
    position: absolute;
    transform: rotate(180deg);
}


.expand_down{
  position: absolute;
    bottom: 15px;
    right: 15px;
    transition: all 0.3s ease;
}

.expanded-faq{
  display: none;
}




.page_wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 55px;
}


.page_body{
    width: 800px;
    max-width: 90%;
    margin: 50px 0;
}




.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal content box */
.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  position: relative;
}

.modal video{
    display: block;
    width: 800px;
    max-width: 100%;
    margin-top: 30px;
}

/* Close button */
.close-btn {
  color: #aaa;
  float: right;
  font-size: 24px;
  cursor: pointer;
}

.close-btn:hover {
  color: #000;
}


.swiper-wrapper {
    transition-timing-function: linear !important;
 }