/* :is(.pbi1, .pbi2) {} */

.pbi1 { padding-bottom: 0; }
.pbi1 img { max-width: 100%; }
/* .pbi1 .slider { background-image: url('../images/pbi1-bg-1.png'); background-position: center center; background-size: cover;} */

.pbi1-2 { padding-top: 55px;}
/* .pbi1-2 { padding-bottom: 0;} */
.pbi1-2 .layout { display: flex; gap: 10px; }
.pbi1-2 .layout > * { border-radius: 20px; overflow: hidden; position: relative; }
.pbi1-2 .layout :is(.slide, .slider) { height: 560px; }
.pbi1-2 .layout .slider { overflow: hidden;}
.pbi1-2 .layout .left { flex: 1 1 70%; max-width: 870px; background: url('../images/pbi1-2-main-s1-bg.webp');  }
.pbi1-2 .layout .left, .pbi1-2 .layout .left .title { color: #FFF; }
.pbi1-2 .layout .left .slide {padding: 30px 40px; }
.pbi1-2 .layout .left .slide-1 .info {max-height: 405px; overflow: hidden;}
.pbi1-2 .layout .left .slide-1 .qrs { position: absolute; bottom: 15px; left: 20px; padding-right: 20px;}
.pbi1-2 .layout .left .slide-1 .qrs img {max-width: 100%;}
.pbi1-2 .layout .left .slide-1 .title { margin-bottom: 40px;}
.pbi1-2 .layout .left .slide-1 .tags { display: flex; flex-wrap: wrap; gap: 20px 15px;   }
.pbi1-2 .layout .left .slide-1 .tags > * { background-color: rgba(255, 255, 255, 0.2); border-radius: 100px; padding: 10px 20px; }

.pbi1-2 .layout .right { flex: 0 0 417px; }
/* .pbi1-2 .layout .right { flex: 1 1 30%; max-width: 415px; min-width: 350px; } */
.pbi1-2 .layout .right .slide { padding: 50px 40px 20px; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative;}

.pbi1-2 .layout .right .alert { background: var(--main-red); color: #FFF; }
.pbi1-2 .layout .right .alert .title {color: #FFF; margin-bottom: 30px; }
.pbi1-2 .layout .right .alert .info { margin-bottom: 30px;}
.pbi1-2 .layout .right .alert .button { position: absolute; bottom: 30px; left: 40px; right: 40px; padding: 15px 30px; display: flex;}

.pbi1-2 .layout .right .slick-arrow { display: none !important;}
.pbi1-2 .layout .right .slick-dots { position: absolute; top: 10px; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 40px;}
.pbi1-2 .layout .right .slick-dots li { flex: 1 1 0; height: 5px; }
.pbi1-2 .layout .right .slick-dots button { font-size: 0; color: transparent; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); padding: 0; }
.pbi1-2 .layout .right .slick-dots .slick-active button, .pbi1-2 .layout .right .slick-dots li:hover button { background: rgba(0, 0, 0, 0.3); }


.pbi1-3 { padding-top: 55px; background-color: var(--main-blue);}
.pbi1-3 .page-box-header :where(.title, a) { color: #FFF; border: 0; }

/* .pbi1-3 { padding-bottom: 0;} */
.pbi1-3 .layout { display: flex; gap: 20px; margin-bottom: 50px; }
.pbi1-3 .layout > * { position: relative; border-radius: 20px; overflow: hidden; }
.pbi1-3 .layout :is(.slide, .slider) { height: 460px; }
.pbi1-3 .layout .slider { overflow: hidden; }
.pbi1-3 .layout .left { flex: 1 1 100%;  }
.pbi1-3 .layout .left .slide { position: relative; background-size: cover; background-position: center center; padding: 40px; color: #FFF; margin-right: 20px; border-radius: 20px; overflow: hidden;  }
.pbi1-3 .layout .left .slide .title { color: #FFF;}
.pbi1-3 .layout .left .slide .footer { display: flex; justify-content: space-between; gap: 20px; align-items: center;}
.pbi1-3 .layout .left .slide .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(140.43deg, rgba(0, 0, 0, 0) -12.21%, rgba(0, 0, 0, 0.4) 46.6%); transform: scale(-1,1); z-index: 11; }
/* .pbi1-3 .layout .left .slide .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(140.43deg, rgba(0, 0, 0, 0) -12.21%, rgba(0, 0, 0, 0.6) 46.6%); transform: scale(-1,1); z-index: 11; } */
.pbi1-3 .layout .left .slide .content { position: relative; z-index: 12; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.pbi1-3 .layout .left .slide .link { font-size: 16px; padding: 6px 14px; }
.pbi1-3 .layout .left .slide .link .icon {transition: all 0.3s ease; margin-bottom: 1px;}
.pbi1-3 .layout .left .slide .link:hover .icon { transform: rotate(45deg);}
.pbi1-3 .layout .left .slick-list { margin-right: -20px;}

.pbi1-3 .layout .right { flex: 0 0 380px; border: 2px solid var(--main-red);   }
/* .pbi1-3 .layout .right { flex: 1 1 30%; max-width: 415px; min-width: 350px; } */
.pbi1-3 .layout .right .slide {  background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative;}
.pbi1-3 .layout .right .alert { background: #FFF; color: var(--main-black);  }
.pbi1-3 .layout .right .alert .inner { padding: 40px 40px 20px;}
.pbi1-3 .layout .right .alert .title {margin-bottom: 15px; line-height: 110%; }
.pbi1-3 .layout .right .alert .info { margin-bottom: 30px;}
.pbi1-3 .layout .right .alert .button { position: absolute; bottom: 30px; left: 40px; right: 40px; padding: 10px 30px; display: flex; background: var(--main-red); color: #FFF;}
.pbi1-3 .layout .right .alert .button .icon { display: flex; align-items: center; justify-content: center; background: #FFF; border-radius: 50px; width: 40px; height: 40px;}
.pbi1-3 .layout .right .alert.not-important .button { display: none;}
.pbi1-3 .layout .right .alert.not-important .inner { padding: 25px 0 0 0;}
.pbi1-3 .layout .right .alert.not-important :is(.inner, .info, figure) { width: 100%; height: 100%; margin-bottom: 0;}
.pbi1-3 .layout .right .alert.not-important figure { display: flex; align-items: center; justify-content: center; }
.pbi1-3 .layout .right .alert.not-important figure img { width: 100%; height: 100%; object-fit: contain !important;}

.pbi1-3 .layout .right .slick-list {  }
.pbi1-3 .layout .right .slick-arrow { display: none !important;}
.pbi1-3 .layout .right .slick-dots { position: absolute; top: 5px; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 40px;}
.pbi1-3 .layout .right .slick-dots li { flex: 1 1 0; height: 5px; }
.pbi1-3 .layout .right .slick-dots button { font-size: 0; color: transparent; width: 100%; height: 100%; background: rgba(202, 32, 43, 0.3); padding: 0; }
.pbi1-3 .layout .right .slick-dots .slick-active button, .pbi1-2 .layout .right .slick-dots li:hover button { background: rgba(202, 32, 43, 0.8); }
/* .pbi1-3 .layout .right .slick-dots button { font-size: 0; color: transparent; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); padding: 0; }
.pbi1-3 .layout .right .slick-dots .slick-active button, .pbi1-2 .layout .right .slick-dots li:hover button { background: rgba(0, 0, 0, 0.3); } */

.pbi1-3 .page-box-footer { gap: 20px 50px;}
.pbi1-3 .page-box-footer .join { flex: 1 1 auto; display: flex; align-items: center; text-align: center; min-height: 90px; padding: 20px 20px; border-radius: 20px; border: 1px solid #FFF; color: #FFF; }
.pbi1-3 .page-box-footer .join .cols { gap: 10px; width: 100%;flex-wrap: nowrap;}
.pbi1-3 .page-box-footer .join .icon { transform: rotate(45deg);}
.pbi1-3 .page-box-footer .join .title { font-weight: bold; font-size: 22px; }
.pbi1-3 .page-box-footer .apps { gap: 10px; }
.pbi1-3 .page-box-footer .app { background: #241F21; border-radius: 20px; width: 300px; height: 90px; display: flex; align-items: center; justify-content: center; }


.pbi2 { background-color: #FFF; }
.pbi2 .items { position: relative; display: flex; flex-wrap: wrap; gap: 20px;}
.pbi2 .group { display: flex; flex-direction: column; gap: 20px;}
.pbi2 .item {  padding: 55px 50px; border-radius: 20px; background-color: var(--main-gray-light);}
/* .pbi2 .item:hover { box-shadow: 0 0 20px rgba(0,0,0,0.1) ;} */
.pbi2 .items > :is(.group, .item) { flex: 1 1 300px; max-width: 420px; }
.pbi2 .item .title { margin-top: 0;}
.pbi2 .item.n1 { padding: 0; background: 0;}
.pbi2 .item.n2 { }
.pbi2 .item.n3 {background: var(--main-red); }
.pbi2 .item.n5 { height: 509px; background-image: url('../images/pbi2-5.jpg'); background-size: cover; background-position: center center; align-self: self-start; display: flex; flex-direction: column; justify-content: end; }
.pbi2 .item.n6 { height: 310px; position: relative; max-width: 860px; flex-shrink: 0; }
.pbi2 .item.n6 .preview { float: right; margin-top: -45px; margin-right: -40px; }
.pbi2 .item.contrast {  color: #FFF; }
.pbi2 .item.contrast .title { color: #FFF; }

.pbi4 { background-color: #FFF; }
.pbi4 .items { overflow: hidden;  }
.pbi4 .items > * { float: left;}
.pbi4 .items .poster-alerts { border-radius: 20px; overflow: hidden; }

.pbi4 .items .item:not(.n1) { width: calc(100% - 440px); padding: 40px; background: var(--main-gray-light); border-radius: 20px;}
.pbi4 .items .item.n1 { margin-right: 20px;}
.pbi4 .items .item.n2 { margin-bottom: 20px; }
.pbi4 .items .item.n2 .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; gap: 20px; flex-wrap: wrap;}
.pbi4 .items .item.n2 .meta > * { border: 1px solid var(--main-gray); border-radius: 100px; height: 60px; padding: 0 30px; display: flex; align-items: center;}
.pbi4 .items .item.n2 .meta .alert { background: var(--main-red); color: #FFF; border-color: var(--transparent); gap: 20px; flex-wrap: nowrap; }
.pbi4 .items .item.n2 .meta .alert .icon { background: #FFF; width: 40px; height: 40px; border-radius: 100px; display: flex; align-items: center; justify-content: center; }
.pbi4 .items .item.n2 .cols { display: flex; align-items: flex-start; gap: 80px; }
.pbi4 .items .item.n2 .title { margin: 0; color: var(--main-red);}

.pbi5 { }
.pbi5 .items { display: flex; gap: 20px;}
.pbi5 .items .item {color: #FFF; border-radius: 20px; padding: 40px;}
.pbi5 .items .item .title {color: #FFF; margin-top: 0;}
.pbi5 .items .item.n1 { background: var(--main-blue); display: flex; flex-direction: column; justify-content: center; }
.pbi5 .items .item.n1 .cols { display: flex; align-items: center; gap: 40px; padding-top: 40px; }
.pbi5 .items .item.n1 .cols > *:nth-child(1) { width: 120px;}
.pbi5 .items .item.n1 .cols .phones { font-size: 32px;}
.pbi5 .items .item.n1 a { color: var(--main-gray-light); border: 0;}
.pbi5 .items .item.n2 { padding: 0;}
.pbi5 .items .item.n2 img { border-radius: 20px; }
.pbi5 .items .item.n3 { background: var(--main-black); flex-basis: 420px; flex-shrink: 0;}
.pbi5 .items .item.n3 .title {margin-bottom: 10px;}
.pbi5 .items .item.n3 form { padding: 35px 0 20px;}
.pbi5 .items .item.n3 form .row { background: var(--main-black);}
.pbi5 .items .item.n3 form .row.n1 { margin-bottom: 10px;}
.pbi5 .items .item.n3 form .row.n2 { margin-bottom: 20px;}
.pbi5 .items .item.n3 form input { border-radius: 100px; border: 1px solid var(--main-gray); height: 60px; width: 100%; padding: 0 40px; display: flex; align-items: center; background: transparent; color: #FFF }
.pbi5 .items .item.n3 form input:focus { border-color: #FFF;}
.pbi5 .items .item.n3 form .button { background: var(--main-gray-light); color: var(--main-black); justify-content: center;} 
.pbi5 .items .item.n3 .description { color: var(--main-gray); font-size: 15px;} 
.pbi5 .items .item.n3 .description a { color: var(--main-gray); } 
.pbi5 .items .item.n4 { flex-basis: 420px; flex-shrink: 0; background-position: center bottom; background-size: contain; background-color: var(--main-blue); background-repeat: no-repeat;}

.pbi6 { background-color: #FFF;}
.pbi6 .page-box-title { margin-top: 0; margin-bottom: 30px;}
.pbi6 .items {}
.pbi6 .item { border-radius: 20px; padding: 40px; margin-bottom: 20px; border: 0;}
.pbi6 .item .title {}
.pbi6 .layout { display: flex; gap: 20px;}
.pbi6 .layout > .left {}
.pbi6 .left .item { display: flex;  flex-shrink: 0; width: 420px; height: 420px;  display: flex; align-items: flex-end; background-size: cover; background-position: center center; background-color: var(--main-gray-light); }
.pbi6 .left .item .title { margin: 0; color: #FFF; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.4); padding: 0px 5px; border-radius: 5px; }
/* .pbi6 .left .item .title.contrast { background-color: #75b2dd; padding: 0 10px 3px; border-radius: 5px; } */
.pbi6 .left .item.n1 { background-image: url('../images/pbi6-1.jpg');} 
.pbi6 .left .item.n2 { background-image: url('../images/pbi6-2.jpg');} 
.pbi6 .left .item.n3 { background-image: url('../images/pbi6-3.jpg');} 
.pbi6 .left .item.n4 { background-image: url('../images/pbi6-4.jpg');} 
.pbi6 .left .item.n7 { background-image: url('../images/pbi6-7.jpg');} 
.pbi6 .left .item.n8 { background-image: url('../images/pbi6-8.jpg');} 
.pbi6 .left .item.n9 { background-image: url('../images/pbi6-9.jpg');} 

.pbi6 .layout > .right { }
.pbi6 .right .item { display: block;}
.pbi6 .right .item.app { background: var(--main-gray-light); overflow: hidden; position: relative; padding-right: 340px; height: 520px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;}
.pbi6 .right .item.app .mobile { position: absolute; right: 0; bottom: 0; }
.pbi6 .right .item.app .title {margin-top: 0;}
.pbi6 .right .item.app .qr-codes { display: flex; width: fit-content; padding: 20px; margin: 60px 0 20px; background: #FFF; border-radius: 20px;}
.pbi6 .right .item.app .qr-codes-v2 { display: flex; gap: 20px; margin: 0 0 20px; justify-content: center; padding-right: 35px;}
.pbi6 .right .item.app .qr-codes-v2 .qr { display: flex; flex-direction: column; align-items: center; gap: 0px; padding: 10px; background: #FFF; border-radius: 20px;}
.pbi6 .right .item.app .qr-codes-v2 .qr img { width: 130px;}
.pbi6 .right .item.app .qr-codes-v2 .qr .text { font-size: 14px; font-weight: bold;}
.pbi6 .right .item.app .description { color: var(--main-gray); }

.pbi6 .right .item.generated { background-color: var(--main-blue); background-size: cover; background-position: center center;  color: #FFF; display: flex; flex-direction: column; height: 420px;}
.pbi6 .right .item.generated .title { margin-top: 0; color: #FFF;}
.pbi6 .right .item.generated .button-holder { margin-top: auto; }
.pbi6 .right .item.generated .button { width: 280px}


.pbi8 {padding-top: 0;}


/* -------------------------- */
/* ---------- adaptive ---------- */
/* -------------------------- */

@media all and (min-width: 1600px) {
    
}

@media all and (max-width: 1600px) {
    .pbi1-3 { padding: 50px 0px;}
    .pbi1-3 .page-box-header { display: none;}
    .pbi1-3 .layout { margin-bottom: 20px;}
    .pbi1-3 .page-box-footer { gap: 20px;}
}

@media all and (max-width: 1280px) {
    .pbi1-3 .layout .left .slide .link span {  display: none; }
    .pbi1-3 .page-box-footer .join { padding: 10px 20px; }
}

@media all and (max-width: 1240px) {

}

@media all and (max-width: 1220px) {
    .pbi6 .layout { flex-direction: column;}
    .pbi6 .layout > .left { display: flex; flex-wrap: wrap; gap: 20px; }
    .pbi6 .layout > .left > * { margin: 0; flex: 1 1 0; min-width: 300px;}
}

@media all and (max-width: 1200px) {
    .pbi5 .items .item.n2 { display: none;}
}

@media all and (max-width: 1180px) {
    .pbi1-3 .page-box-footer {  }
    .pbi1-3 .page-box-footer .apps { order: 1; }
    .pbi1-3 .page-box-footer .join { order: 2; }
}

@media all and (max-width: 1120px) { 
	.pbi4 .items .item.n2 .cols { flex-direction: column; gap: 20px;}

}

@media all and (max-width: 1080px) {
}

@media all and (max-width: 1024px) {

    .pbi1-2 .layout {flex-wrap: wrap; gap: 20px;}
    .pbi1-2 .layout .left {flex: 1 1 100%;}


	.pbi2 .items { flex-direction: column;}
	.pbi2 .items > :is(.group, .item) { width: 100%; max-width: none; flex: none;}
    .pbi2 .item.n1 { padding-bottom: 20px;}
    .pbi2 .item.n5 { height: auto;}

}

@media all and (max-width: 980px) { 

}

@media all and (max-width: 960px) { 
    .pbi2 .item.n6 { height: auto;}
    .pbi2 .item.n6 .preview  { float: none; margin: 0 0 20px; }
    .pbi2 .item.n6 img {max-width: 100%;}


}
@media all and (max-width: 940px) { 

    /* .pbi1-2 .layout .left .title { font-size: ;} */

    .pbi4 .page-box-title { margin-bottom: 10px;}
    .pbi4 .items { display: flex; flex-direction: column; gap: 20px;}
    .pbi4 .items > * { width: 100% !important; margin: 0 !important;}
    .pbi4 .poster-alerts { height: 60px; width: 60px; position: absolute; top: -10px; right: 0px; adasdada}
    .pbi4 .poster-alerts img { object-fit: cover; object-position: top center; width: 100%; height: 100%;}
}

@media all and (max-width: 920px) {
    .pbi5 .items { flex-direction: column;}
    .pbi5 .items .item.n3 input { max-width: none;}
    .pbi5 .items .item.n4 {display: none;}
}

@media all and (max-width: 900px) {
}

@media all and (max-width: 840px) { 
}

@media all and (max-width: 830px) {
    .pbi1-3 .layout .left .slide { padding: 20px;}
}

@media all and (max-width: 800px) {
    .pbi1-3 { padding-top: 20px;}
    .pbi1-3 .layout { flex-wrap: wrap;}
    /* .pbi1-3 .layout { flex-direction: column;} */
    /* .pbi1-3 .layout .left.slider { height: auto; }
    .pbi1-3 .layout .left .slick-track { display: flex;}
    .pbi1-3 .layout .left .slide { height: auto; } */
    .pbi1-3 .layout .right { flex-basis: 100%; max-width: 530px;}
    .pbi1-3 .layout :is(.right, .left).slider { height: auto;} 
    .pbi1-3 .layout :is(.right, .left) .slick-track { display: flex;} 
    .pbi1-3 .layout :is(.right, .left) .slide { height: auto; }
}

@media all and (max-width: 768px) {

}

@media all and (max-width: 767px) {

}

@media all and (max-width: 720px) {
    .pbi6 .right .item.app { padding: 20px; height: auto; padding-bottom: 0; }
    .pbi6 .right .item.app img  { max-width: 100%;}
    .pbi6 .right .item.app .qr-codes { margin: 20px 0;}
    .pbi6 .right .item.app .mobile {position: relative; left: -20%;}
}

@media all and (max-width: 680px) {

}

@media all and (max-width: 660px) {
    .pbi6 .left .item { padding: 20px; height: 200px;}
}
@media all and (max-width: 640px) {
    .pbi1-2 { padding-top: 20px;}
    .pbi1-2 .layout .right {flex: 1 1 100%; max-width: none; min-width: none;}
}

@media all and (max-width: 600px) {

}

@media all and (max-width: 560px) {
    .pbi1-3 .page-box-footer .join { padding: 10px 20px;}
}

@media all and (max-width: 540px) {

    .pbi1-2 .layout .left .slide { padding: 20px 0px 0 25px;}
    .pbi1-2 .layout .left .slide-1 .title { font-size: 6.8vw;}

    .pbi6 .right .item.n1 .mobile {   }
}

@media all and (max-width: 480px) {

}

@media all and (max-width: 460px) {
    .pbi5 .items .item { padding: 20px;}
    .pbi5 .items .item.app .cols { gap: 20px; padding-top: 20px;}
    .pbi5 .items .item.app .cols .phones { font-size: 20px; font-weight: bold;}

}

@media all and (max-width: 450px) {
    .pbi6 .right .item.n2 { padding: 20px; height: auto;}
    .pbi6 .right .item.n2 .text { margin-bottom: 20px;}
    .pbi6 .right .item.n2 .button { width: 100%;}
}
@media all and (max-width: 440px) {
    .pbi1-3 .layout .right .alert .inner { padding-left: 20px; padding-right: 20px; padding-bottom: 70px; }
    .pbi1-3 .layout .right .alert .button { left: 20px; right: 20px; bottom: 20px;}
}

@media all and (max-width: 430px) {
    .pbi2 .item { padding: 20px;}
    .pbi2 .item .title { margin-bottom: 15px;}
    .pbi4 .items .item:not(.app) { padding: 20px;}
    .pbi4 .items .item.n2 .meta { margin-bottom: 20px;}
}

@media all and (max-width: 414px) {

}
@media all and (max-width: 400px) {
    .pbi4 .items .item.n2 .meta > * { padding: 0px 15px;}
}

@media all and (max-width: 385px) {
    .pbi6 .right .item.app { }
    
}
@media all and (max-width: 359px) {

}