.bhero{}
.mob{
    display:none;
}

.bhero>.container2 {
    display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 204px 64px 0px 64px;
        gap: 0px;
        align-items: start;
        justify-content: space-between;
        position: relative;
        max-width: 1440px;
        min-width: 1440px;
        position: relative;
} 

.bhero-title {
    font-family: var(--second-family);
        font-weight: 700;
        font-size: 56px;
        line-height: 100%;
        text-align: center;
        text-transform: uppercase;
        color: #f6f6f8;
        width: 100%;
margin-bottom: 33px;
}

.bhero-title>span {
color: #9e77ed;

}

.bhero-text {
    font-family: var(--font-family);
        font-weight: 500;
        font-size: 28px;
        line-height: 120%;
        color: #f6f6f8;
            text-align: center;
            width: 100%;
}

.bhero-text>span {
color: #f79009;

}


.bhero-img>img {
    width: 796px;
    height: 389px;
z-index: 0;
position: absolute;
top:350px;
left:48%;
transform: translateX(-38%);

}

.bhero-topbox {
    display: flex;
    flex-direction: row;
    margin-top: 48px;
    position: relative;
    justify-content: space-between;
z-index: 1;
width: 100%
}

.bhero-top-imgbox {
    border-radius: 24px;
    width: 640px;
    height: 374px;
border-radius: 24px;
}

.bhero_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
      
}

.bhero-top-list {
    display: flex;
    flex-direction: column;
    gap:28px;
    width: calc(100% - 672px);
}

.bhero-top-item {
    border-radius: 24px;
    background: #f6f6f8;
    display: flex;
gap: 8px;
align-items: center;
    width: 100%;
    padding:12px;
}

.bhero-svg-box {
    
    width: 81px;
    height: 82px;
    background: #f79009;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.bhero-top-svg {
width: 47px;
height: 47px;
object-fit: cover;
}

.bhero-top-text {
    font-family: var(--font-family);
        font-weight:400;
        font-size: 24px;
        line-height: 120%;
        color: #343454;
}

.bhero-top-text>span {
font-weight: 600;
}

.bhero-bottom-box {
    display: flex;
    /* justify-content: space-between; */
    width: 100%;
    position: relative;
    gap: 19px;
}



.bhero-bleft {
    position: relative;
    z-index: 1;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
}

.bleft-top {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;  
}

.bleft-top-img {
    width: 239px;
        height: 239px;
    position: absolute;
    top:57%;
    right:-32%;
     /* transform: translate(-50%, 50%);  */
    z-index:0;
}
.bleft-top-img2{
    margin-top: 20px;
    position: relative;
    z-index: 1;
    width: 650px;
        height: 615px;
}


.bleft-bottom {
background: #343454;
    margin-top: 15px;
    padding:26px;
border: 2px solid #f79009;
    border-radius: 24px;
    width: 640px;
    height: 165px;
    display: flex;
    flex-direction: column;
    gap:33px;}

.bleft-bottom-text 
{font-family: var(--font-family);
    font-weight: 600;
    font-size: 28px;
    line-height: 89%;
    text-align: center;
    color: #f6f6f8;}



.bhero-bright {
    display: flex;
    flex-direction: column;
    gap:44px;
    position: relative;
    width: 600px;
}

.bright-top {
    padding-top: 48px;
    display: flex;
    gap: 15px;
    align-items: center;
    position: relative;
}

.bright-topleft {
    background: #343454;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:29px;
    border: 2px solid #f79009;
        border-radius: 24px;
    width: 641px;
    min-width: 641px;
        height: 165px;
        padding: 18px;
}


.bright-subleft1 {
    border-radius: 24px;
        width: 302px;
        min-width: 302px;
        padding: 30px;
        height: 128px;
        background: #7f56d9;
        font-family: var(--font-family);
            font-weight: 600;
            font-size: 28px;
            line-height: 129%;
            text-align: center;
            color: #f6f6f8;
            display: flex;
            align-items: center;
            justify-content: center;
}

.bright-subleft2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}



.bright-topleft-text {
    font-family: var(--font-family);
        font-weight: 600;
        font-size: 28px;
        line-height: 118%;
        text-align: center;
        color: #f6f6f8;
}

.bright-topleft-button {
border-radius: 360px;
    padding: 8px 24px;
    width: 141px;
    height: 48px;
    background: #7f56d9;
    border: none;
    font-family: var(--font-family);
        font-weight: 600;
        font-size: 16px;
        line-height: 138%;
        text-align: center;
        color: #fff;
        display: flex;
            align-items: center;
            justify-content: center;
        
}



.bright-topright-img {
    position: absolute;
    top:-60px;
    right:-130px;
    width: 402px;
    height: 402px;
}

.bright-bottom {
align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap:10px;
    width:100%
}

.bottom-img3{
    width: 1024px;
    height: 717px;
    position: absolute;
    top: 0px;
    left: -10px;
z-index: 0;
}
.bottom-img4 {
    width: 834px;
    height: 461px;
    position: absolute;
    bottom: 0.5%;
    left: 150px;
    z-index: 0;
}
.bright-bottom-img {
    width: 281px;
        height: 281px;
        object-fit: cover;
        position: absolute;
        top: 72%;
        transform: translateY(-20%);
       right:-82px;
       
}


.bright-tendent-img {
    width: 400px;
    height: 611px;
    object-fit: cover;
    border-radius: 16px;
        margin-left: 120px;
position: relative;
z-index: 2;
}

/* overlay */
.bright-video-overlay {
        margin-left: 120px;
    position: absolute;
    inset: 0;
    background: none;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    border-radius: 26px;
    width: 400px;
    height: 604px;
    bottom: 3px;
    left: 0px;
    align-self: end;
    z-index: 3;
}

/* ховаємо */
.bright-video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* кнопка */
.bright-play-btn {
    border-radius: 1095px;
    padding: 8px;
    width: 96px;
    height: 96px;
    border: none;
   -webkit-backdrop-filter: blur(3.545454263687134px);
   backdrop-filter: blur(3.545454263687134px);
background: rgba(52, 52, 84, 0.32);

    display: flex;
    align-items: center;
    justify-content: center;
}


.bhero .hero_new_title2 {
width: 100%;
margin-top: 71px;
}

.heronew-cafe-slider {

    justify-self: start;
    width: fit-content;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    position: relative;
    z-index: 2;
    display: flex;

    left: 0%;
}

.heronew-cafe-slider.dragging {
    cursor: grabbing;
}

.heronew-cafe-list {
    align-self: flex-start;
    margin-top: 46px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    width: max-content;
    align-self: center;
    /* Важливо */
    flex-shrink: 0;
    /* Початкове положення */
    transform: translateX(0);
    /* Забороняємо браузеру робити scroll */
    pointer-events: none;
}

.heronew-cafe-item {
    flex: 0 0 268px;
    border-radius: 24px;
    width: 268px;
    height: 159px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #7f56d9;
}

.heronew-cafe-img {
    border-radius: 129px;
    width: 49px;
    height: 49px;
}

.heronew-cafe-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 17px;
    text-align: center;
    color: #f6f6f8;
}

.heronew-cafe-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    color: #f6f6f8;
}

.heronew-cafe-subtitle {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #f6f6f8;
}

.bhero .hero_new_title4{
    width: 100%;
}

.herone-arr{
    position:absolute;
    right: 100px;
   bottom: 350px;
}



.biz.commentv .commentv-border{
    background: #343454;
    border: 2px solid #f79009;
position: relative;
    z-index: 1;
}


        .bizprofit {}
    
           .bizprofit>.container2 {
    display: flex;
flex-direction: column;
        padding: 64px 80px 32px 80px;
        gap: 0px;
        align-items: center;
        justify-content: space-between;
        position: relative;
        max-width: 1440px;
        min-width: 1440px;
        position: relative;
           }
    
        .bizprofit-title {
            font-family: var(--second-family);
                font-weight: 700;
                font-size: 40px;
                line-height: 110%;
                text-align: center;
                text-transform: uppercase;
                color: #f6f6f8;
                margin-bottom: 76px;
                position: relative;
                    z-index: 1;
    
        }
         .bizprofit-title>span {
        color: #9e77ed;
         }

        .bizprofit-img {
            position: absolute;
            width:1307px;
            height:3684px;
            top:-10px;
           
            z-index: 0;
        }
    
        .bizprofit-list {
            display: flex;
            flex-direction: row;
            gap: 41px;
            justify-content: space-between;
            align-items: center;
            border-radius: 24px;
        }
    
        .bizprofit-item {
            width: 410px;
                height: 193px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            z-index: 1;
            background: #f6f6f8;
            border-radius: 24px;
            position: relative;
            padding: 55px 29px 21px 29px;
        }
    
        .bizprofit-item-img {
          
            width: 91px;
            height: 91px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    
        .bizprofit-item-title {
font-family: var(--font-family);
    font-weight: 700;
    font-size: 25px;
    line-height: 120%;
    text-align: center;
    text-transform: uppercase;
    color: #7f56d9;
        }
    
        .bizprofit-item-text {

            font-family: var(--font-family);
                font-weight: 400;
                font-size: 24px;
                line-height: 120%;
                text-align: center;
                color: #343454;
        }
    
.bizprofit-item-text>span {


    font-weight: 600;

}


        .bizprofit-text {
            background: #7f56d9;
                border-radius: 40px;
                height: 57px;
                display: flex;
                align-items: center;justify-content: center;
                padding: 20px;
font-family: var(--font-family);
    font-weight: 500;
    font-size: 28px;
    line-height: 125%;
    text-align: center;
    color: #f6f6f8;
    margin-top: 64px;
    margin-bottom: 20px;
position: relative;
z-index: 1;
        }

        .bizprofit-arr{
            align-self: center;
            position: relative;
                z-index: 1;
                transform: rotate(90deg);
        }



                .bsoc {}
        
                                .bsoc>.container2 {
                                        display: flex;
                                            flex-direction: column;
                                            padding: 0px 80px 0 80px;
                                            gap: 0px;
                                            align-items: center;
                                            justify-content: space-between;
                                            position: relative;
                                            max-width: 1440px;
                                            min-width: 1440px;
                                            position: relative;
                                }
        
                .bsoc-title {font-family: var(--second-family);
                    font-weight: 700;
                    font-size: 40px;
                    line-height: 110%;
                    text-align: center;
                    text-transform: uppercase;
                    color: #9e77ed;
                margin-bottom: 32px;
                }
        
 .bsoc-title>span{
    color: #f6f6f8;
 }


                .bsoc-box {
                    width: 100%;
border-radius: 24px;
background: #7f56d9;
padding: 46px 66px;
display: flex;
flex-direction: column;
gap: 44px;
align-items: center;
justify-content: space-between;
                }
        
                .bsoc-list {

                    display: flex;
                    flex-direction: row;
                    gap:34px;
                    align-items: center;
                    justify-content: space-between;
                }
        
                .bsoc-item {
background: #343454;
border-radius: 59px;
display: flex;
align-items: center;
justify-content: center;
padding: 25px 85px;
                }
        
                .bsoc-item-text {
font-family: var(--font-family);
    font-weight: 400;
    font-size: 24px;
    line-height: 0%;
    text-align: center;
    color: #f6f6f8;
                }
        
                .bsoc-list-video {
                    display: flex;
                    flex-direction: row;
                    gap:89px;
                    align-items: start;
                    justify-content: space-between;
                   
                }
        
                .bsoc-item-video {

                    position: relative;
border-radius: 24px;
    width: 544px;
    height: 648px;
                }
                                .bsoc-item-video video {
                                    object-fit: contain;
                                    border-radius: 24px;
                                }



                 .bsoc  .bright-tendent-img {
                    margin-left: 0;
                    border-radius: 24px;
                        width: 544px;
                        height: 648px;
                }
        
                .bsoc .bright-video-overlay {
                    margin: unset;
                    background: none;
                    border-radius: 24px;
                        width: 544px;
                        height: 648px;
                }
        
               

                                .clients {}
                
                                 .clients>.container2 {
                                        display: flex;
                                            flex-direction: column;
                                            padding: 64px 80px 0 80px;
                                            gap: 0px;
                                            align-items: center;
                                            justify-content: space-between;
                                            position: relative;
                                            max-width: 1440px;
                                            min-width: 1440px;
                                            position: relative;
                                 }
                
                                .clients-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 40px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 38px;
                                }
                
                                .clients-title>span {
                                    color: #9e77ed;
                                }

                                .clients-box {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: space-between;
                                    gap: 28px;
                                    padding:28px 69px 62px 69px;
                                    border: 2px solid #f79009;
                                        border-radius: 24px;
                                }
                
                                .clients-subtitle {
                                    background: #7f56d9;
                                    border-radius: 28px;
                                    width: 100%;
                                    font-family: var(--font-family);
                                        font-weight: 400;
                                        font-size: 24px;
                                        line-height: 0%;
                                        text-align: center;
                                        color: #f6f6f8;
                                        padding: 20px;
                                        text-align: center;
                                }
                
                                .clients-img {
                                    object-fit: cover;
                                    border-radius: 24px;
                                        width: 1176px;
                                        height: 672px;
                                }
                
                                .stat {position: relative;
                                    z-index: 1;}
                
                                   .stat>.container2{
                                        display: flex;
                                            flex-direction: column;
                                            padding: 58px 80px 0 80px;
                                            gap: 0px;
                                            align-items: center;
                                            justify-content: space-between;
                                            position: relative;
                                            max-width: 1440px;
                                            min-width: 1440px;
                                            position: relative;
                                   }
                                   
                                   
                                   .stat-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 40px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                    color: #f6f6f8;
                                    margin-bottom: 49px;


                                   }
                                 .stat-title>span {
                              
                                     color: #9e77ed;
                
                
                                 }



                                .stat-box {
                                    width: 100%;
                                    border-radius: 24px;
                                    background: #7f56d9;
                                    display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: space-between;
                                       padding: 46px 68px;
                                        gap: 46px;
                                        
                                }
                
                                .stat-text {
                                    border-radius: 59px;
                                    width: 100%;
                                    background: #343454;
                                    font-family: var(--second-family);
                                        font-weight: 400;
                                        font-size: 24px;
                                        line-height: 0%;
                                        text-align: center;
                                        color: #f6f6f8;
                                        padding: 30px;
                                        text-align: center;
                            }
                
                                .stat-img {
                                    border-radius: 24px;
                                        width: 1177px;
                                        height: 858px;
                                }
               
                                .stat-bbox{
                                        background: #7f56d9;
                                            border-radius: 40px;
                                    margin-top: 61px;
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    gap:10px;
                                    padding: 18px 32px;
                                }

.stat-link{
    border-radius: 360px;
        padding: 8px 24px;
        width: 141px;
        height: 48px;
    background: #f6f6f8;
        font-family: var(--font-family);
            font-weight: 600;
            font-size: 16px;
            line-height: 138%;
            text-align: center;
        color: #7f56d9;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
                z-index: 1;
}

                                .stat-btext {
                                    position: relative;
                                        z-index: 1;
                                    font-family: var(--second-family);
                                        font-weight: 500;
                                        font-size: 28px;
                                        line-height: 129%;
                                        color: #f6f6f8;
                                }
                
                                .a {color: #f79009;}
                
                                /* .b {color: #9e77ed;} */
                
                                .consult>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding: 34px 80px 0 80px;
                                    gap: 0px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 1440px;
                                    min-width: 1440px;
                                    position: relative;
                                }
                
                                .consult-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 40px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 26px;
                                        position: relative;
                                            z-index: 1;
                                }
                                .consult-line{
                                    position: absolute;
                                    top:-100px;
                                    right:270px;
                                    z-index:0;
                                    width: 844px;
                                    height: 670px;
                                }




.consult-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index:1;
    width: 100%;
}

.consult-left {
    padding-top:82px;
    height: 100%;
    display: flex;
   gap: 110px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.consult-right {
    display: flex;
    flex-direction: column;
    gap:26px;
}

.consult-title-form {
border: 2px solid #7f56d9;
    border-radius: 360px;
    padding: 12px 24px;
    width: 620px;
    height: 56px;
    background: #343454;
    font-family: var(--font-family);
        font-weight: 500;
        font-size: 28px;
        line-height: 120%;
        text-align: center;
        color: #f6f6f8;
        
}

.consult form{
    border-radius: 24px;
        padding: 8px 24px 24px;
        width: 620px;
        height: 383px;
        max-height: 820px;
        box-shadow: 0 0 40px 0 rgba(195, 195, 195, 0.25);
            background: #f6f6f8;
}
.consult  .modal-form{
    gap:0;
}
.consult form button{
    width: 100%;
}

.consult form button:disabled {
    background: #e4e4ec;
}

.consult .questing-cont-list {
    border: 2px solid #f79009;
        border-radius: 24px;
        padding: 41px;
}

.questing-cont-item {}

.questing-label {}

.questing-link {}


                                .read>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding: 63px 80px 0 80px;
                                    gap: 0px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 1440px;
                                    min-width: 1440px;
                                    position: relative;
                                }
                


                                                                          .read-line {
                                                                              position: absolute;
                                                                              top: 0px;
                                                                              right: 100px;
                                                                              z-index: 0;
                                                                              width: 1291px;
                                                                              height: 1426px;
                                                                              z-index: 0;
                                                                          }
                                .read-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 40px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 31px;
                                            position: relative;
                                                z-index: 1;
                                }
                               .read-title>span{
                                color: #9e77ed;
                               }


                                .read-box {
                                    border: 2px solid #7f56d9;
                                        background: var(--colors-grey-700);
                                        border-radius: 24px;
                                        padding: 41px;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 28px;
                                        align-items: center;
                                            position: relative;
                                                z-index: 1;
                                }
                
                                .read-text {
                                    font-family: var(--font-family);
                                        font-weight: 500;
                                        font-size: 28px;
                                        line-height: 120%;
                                        text-align: center;
                                        color: #f6f6f8;
                                }
                
                                .read-link {
                                border-radius: 360px;
                                    padding: 8px 24px;
                                    width: 104px;
                                    height: 48px;
                                    background: #7f56d9;
                                    font-family: var(--font-family);
                                        font-weight: 600;
                                        font-size: 16px;
                                        line-height: 138%;
                                        text-align: center;
                                        color: #fff;
                                        padding: 20px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                }
                
                                .quest>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding: 35px 80px 0 80px;
                                    gap: 0px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 1440px;
                                    min-width: 1440px;
                                    position: relative;
                                    z-index: 1;
                                }
                
                                .quest-title {
                                    margin-bottom: 35px;
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 40px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                }
                
                                .quest-title>span{
                                    color: #9e77ed;
                                }
                
                                .quest-list {
                                    display: flex;
                                    width: 100%;
                                    flex-direction: column;
                                    gap:23px;

                                }
                
                                .quest-item 
                                {
                                    display: flex;
                                    flex-direction: row;
                                    gap:19px;
                                    background: #7f56d9;
                                    width: 100%;
                                height: fit-content;
                                padding: 20px;
                                border-radius: 24px;
                                }
                                  .quest-item.active{
                                    background: #f6f6f8;
                                  }

                                .quest-number {
                                   
                                    margin-top: 5px;
                                    width: 25px;
                                    height: 25px;
                                    border-radius: 100%;
                                        background: #f6f6f8;
                                        font-family: var(--font-family);
                                            font-weight: 600;
                                            font-size: 18px;
                                            line-height: 120%;
                                            text-align: center;
                                            color: #343454;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                }

                                .active  .quest-number{
                            background: #7f56d9;
                            color: #f6f6f8;
                                }
                
                                .quest-tbox {
                                    display: flex;
                                    flex-direction: column;
                                    width: calc(100% - 100px);
                                    gap: 20px;
                                }
                
                                .quest-quest {
                                    font-family: var(--font-family);
                                        font-weight: 600;
                                        font-size: 28px;
                                        line-height: 120%;
                                        color: #f6f6f8;
                                        
                                }
                
                                           .active .quest-quest {
                                            color: #343454;
                                           }


                                .quest-answer 
                                {
                                    font-family: var(--font-family);
                                        font-weight: 400;
                                        font-size: 24px;
                                        line-height: 120%;
                                        text-align: justify;
                                        color: #343454;
                                        display: none;
                                }
                                 
                                .active .quest-answer {
                                    display: block;
                                }

                                  





                                .quest-plus {
                                    cursor: pointer;
                                    width: 39px;
                                     height: 39px;
                                        background: #343454;;
                                        border-radius: 100%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-family: var(--font-family);
                                            font-weight: 600;
                                            font-size: 24px;
                                            line-height: 120%;
                                            text-align: center;
                                            color: #f6f6f8;
                                }
                
  .active .quest-plus{transform: rotate(45deg);}


                                .update>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding: 57px 80px 85px 80px;
                                    gap: 31px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 1440px;
                                    min-width: 1440px;
                                    position: relative;
                                }
                
                                .update-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 40px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 0;
                                }
                
                                    .update-title>span {
                                    color: #9e77ed;
                                    }


 @media screen and (max-width: 768px) {
.mob{
    display: block;
}
.desk{display: none;}
.bhero{
overflow: hidden;
    
}

.bhero>.container2 {



padding: 127px 16px 0px 16px;
        min-width: 390px;
            align-items: center;
            max-width: 390px;
} 

.bhero-title {

       
        font-size: 26px;;
      
}
.arrH{
    top:220px;
    right:95px;
    position: absolute;
    width: 17px;
    height: 19px;
    z-index: 0;
}

.bhero-text {
 
        font-size: 18px;
        line-height: 139%;
      
         
}


.bhero-img>img {
    width: 237px;
    height: 236px;
z-index: 1;
position: absolute;
top:270px;
left:50%;
transform: translateX(-48%);

}

.bhero-topbox {

    margin-top: 28px;

width: 100%
}

.bhero-top-imgbox {
    
    width: 143px;
    height: 215px;

}


.bhero-top-list {
    display: flex;
    flex-direction: column;
    gap:16px;
    width: calc(100% - 157px);
}

.bhero-top-item {
height: 61px;

gap: 10px;

    padding:7px;
}

.bhero-svg-box {
    min-width: 47px;
    width: 47px;
    height: 47px;
  
}

.bhero-svg-box>img {
width: 27px;
    height: 27px;

}

.bhero-top-svg {


}

.bhero-top-text {
  
        font-size: 16px;
     
}


.bhero-bottom-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    flex-direction: column-reverse;
}



.bhero-bleft {
   
    margin-top: 18px;
   
    flex-direction: column-reverse;
}

.bleft-top {
width: 100%;
}

.bleft-top-img {
    width: 140px;
        height: 140px;
    position: absolute;
    top:-620px;
    left:-5%;
    transform: translate(-33%);
    z-index:0;
    transform: rotate(0deg);
}
.bleft-top-img2{
    margin-top: 20px;
    position: relative;
    z-index: 1;
    width: 401px;
        height: 357px;
}


.bleft-bottom {
background: #343454;
    margin-top: 0px;
    padding:17px;
border: 2px solid #f79009;
    border-radius: 24px;
    width: 100%;
    height: 135px;
    display: flex;
    flex-direction: column;
    gap:21px;
}

.bleft-bottom-text 
{

font-weight: 500;
    font-size: 18px;
    line-height: 109%;
}

.bhero .update-item2{
    height: 40px;
}

.bhero-bright {
    gap:75px;
     width: 100%;
}

.bright-top {
    padding-top: 48px;
    display: flex;
    gap: 15px;
    align-items: center;
    position: relative;
}

.bright-topleft {
    background: #343454;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:6px;
    border: 1px solid #f79009;
        border-radius: 16px;
        width: 355px;
        height: 135px;
        padding: 15px 6px 15px 12px;
        min-width: 355px;
}


.bright-subleft1 {
    border-radius: 24px;
    width: 160px;
    min-width: 160px;
    height: 104px;
    background: #7f56d9;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 133%;
    text-align: center;
    color: #f6f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bright-subleft2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 171px;
    align-items: center;
}


.bright-topleft-text {
font-weight: 500;
    font-size: 18px;
    line-height: 139%;
}





.bright-topright-img {
    position: absolute;
    top:-30px;
    right:-80px;
    width: 315px;
    height: 315px;
}

.bright-bottom {
    align-items: center;
    justify-content: center;
}

.bottom-img3{
    width: 339px;
    height: 1249px;
    position: absolute;
    top: 0;
    left: 0px;
z-index: 0;
}
.bottom-img4 {
    width: 266px;
    height: 406px;
    position: absolute;
    bottom: 0.5%;
    left:109px;
    z-index: 0;
   bottom:-300px
}
.bright-bottom-img {
    width: 180px;
        height: 180px;
     
        top: 72.5%;
        transform: translateY(-50%) rotate(10deg);
        right: -10%;
        z-index: 2;
}


.bright-tendent-img {
width: 236px;
    height: 361px;
    z-index: 3;
    margin-left: unset;

}

/* overlay */
.bright-video-overlay {
    margin-left: unset;
left: 50%;
transform: translate(-50%);
width: 238px;
    height: 358px;
    bottom:0;
    z-index: 4;
    border-radius: 15px;
  
}

/* ховаємо */
.bright-video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* кнопка */
.bright-play-btn {
    border-radius: 1095px;
    padding: 5px;
    width: 26px;
    height: 26px;
    border: none;
-webkit-backdrop-filter: blur(3.545454263687134px);
backdrop-filter: blur(3.545454263687134px);
background: rgba(52, 52, 84, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
}


.bhero .hero_new_title2 {
width: 100%;
margin-top: 0px;
font-family: var(--second-family);
    font-weight: 700;
    font-size: 26px;
    line-height: 110%;
    text-align: center;
    text-transform: uppercase;
    color: #9e77ed;
    position: relative;
    z-index: 0;
}

.heronew-cafe-slider {

    justify-self: start;
    width: fit-content;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    position: relative;
    z-index: 2;
    display: flex;

    left: 0%;
}

.heronew-cafe-slider.dragging {
    cursor: grabbing;
}

.heronew-cafe-list {
    align-self: flex-start;
    margin-top: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    width: max-content;
    align-self: center;
    /* Важливо */
    flex-shrink: 0;
    /* Початкове положення */
    transform: translateX(0);
    /* Забороняємо браузеру робити scroll */
    pointer-events: none;
}

.heronew-cafe-item {
    flex: 0 0 268px;
    border-radius: 16px;
    width: 185px;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #7f56d9;
}

.heronew-cafe-img {
    border-radius: 129px;
    width: 34px;
    height: 34px;
}

.heronew-cafe-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    color: #f6f6f8;
}

.heronew-cafe-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: #f6f6f8;
}

.heronew-cafe-subtitle {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 10px;
    text-align: center;
    color: #f6f6f8;
}

.bhero .hero_new_title4{
    width: 100%;
    position: relative;
    z-index: 1;
}

.herone-arr{
        position: absolute;
            right: 10px;
            bottom: 230px
}


.biz.commentv .commentv-border{
    background: #343454;
    border: 2px solid #f79009;
position: relative;
    z-index: 1;
}


        .bizprofit {}
    
           .bizprofit>.container2 {
    display: flex;
flex-direction: column;
        padding: 50px 20px 32px 20px;
        gap: 0px;
       width: 100%;
       min-width: 100%;
       max-width: 100%;
           }
    
        .bizprofit-title {
            font-family: var(--second-family);
                font-weight: 700;
                font-size: 26px;
                line-height: 110%;
                text-align: center;
                text-transform: uppercase;
                color: #f6f6f8;
                margin-bottom: 25px;
                position: relative;
                    z-index: 1;
    
        }
         .bizprofit-title>span {
        color: #9e77ed;
         }

        .bizprofit-img {
            position: absolute;
            width:389px;
            height:1580px;
            top:-0px;
           right: 90px;
            z-index: 0;
        }
    
        .bizprofit-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            justify-content: space-between;
            align-items: center;
      
        }
    
        .bizprofit-item {
            margin-left: 27px;

            width: 323px;
                height: 78px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            z-index: 1;
            background: #f6f6f8;
            border-radius: 24px;
            position: relative;
            padding:0;
            align-items:flex-start;
            padding:5px 5px 5px 40px ;
        }
    
        .bizprofit-item-img {
          
            width: 58px;
            height: 58px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%,-50%);
        }
    
        .bizprofit-item-title {
font-family: var(--font-family);
    font-weight: 700;
    font-size: 16px;
        line-height: 120%;
    text-align: start;
    text-transform: uppercase;
    color: #7f56d9;

        }
    
        .bizprofit-item-text {

            font-family: var(--font-family);
                font-weight: 400;
                font-size: 14px;
                line-height: 120%;
                text-align: center;
                color: #343454;
                text-align: start;
        }
    
.bizprofit-item-text>span {


    font-weight: 600;

}


        .bizprofit-text {
            padding: 8px 10px;
border-radius: 16px;
        background: #7f56d9;
font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 139%;
    text-align: center;
    color: #f6f6f8;
    margin-top: 40px;
    margin-bottom:40px;
position: relative;
z-index: 1;
        }

        .bizprofit-arr{
            align-self: center;
            position: absolute;
            bottom: -10px;
                z-index: 1;
                transform: rotate(90deg) translate(-20px);

        }



                .bsoc {}
        
                                .bsoc>.container2 {
                                        display: flex;
                                            flex-direction: column;
                                            padding: 0px 20px 0 20px;
                                            gap: 0px;
                                            align-items: center;
                                            justify-content: space-between;
                                            position: relative;
                                            
                                            min-width: 390px;
                                            position: relative;
                                            max-width: 390px;
                                }
        
                .bsoc-title {font-family: var(--second-family);
                    font-weight: 700;
                    font-size: 26px;
                    line-height: 110%;
                    text-align: center;
                    text-transform: uppercase;
                    color: #f6f6f8;
                margin-bottom: 25px;
                }
        
 .bsoc-title>span{
  
    color: #9e77ed;
 }


                .bsoc-box {
                    width: 100%;
border-radius: 24px;
background: #7f56d9;
padding: 16px 18px 23px;
display: flex;
flex-direction: column;
gap: 13px;
align-items: center;
justify-content: space-between;
                }
        
                .bsoc-list {

                    display: flex;
                    flex-direction: row;
                    gap:9px;
                    align-items: center;
                    justify-content: space-between;
                }
        
                .bsoc-item {
background: #343454;
border-radius: 59px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
                }
        
                .bsoc-item-text {
font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 0%;
    text-align: center;
    color: #f6f6f8;
                }
        
                .bsoc-list-video {
                    display: flex;
                    flex-direction: row;
                    gap:24px;
                    align-items: start;
                    justify-content: space-between;
                   
                }
        
                .bsoc-item-video {
                    position: relative;
border-radius: 24px;
    width: 147px;
    height: 175px;
                }
                                .bsoc-item-video video {
                                    object-fit: contain;
                                    border-radius: 24px;
                                }



                 .bsoc  .bright-tendent-img {
                    border-radius: 24px;
                        width: 147px;
                    height: 175px;
                }
        
                .bsoc .bright-video-overlay {
                    margin: unset;
                    background: none;
                    border-radius: 24px;
                        width: 147px;
                            height: 175px;
                }
        
               

                                .clients {}
                
                                 .clients>.container2 {
                                        display: flex;
                                            flex-direction: column;
                                            padding: 50px 20px 0 20px;
                                            gap: 0px;
                                            align-items: center;
                                            justify-content: space-between;
                                            position: relative;
                                            max-width: 390px;
                                            min-width: 390px;
                                            position: relative;
                                 }
                
                                .clients-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 26px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 38px;
                                }
                
                                .clients-title>span {
                                    color: #9e77ed;
                                }

                                .clients-box {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: space-between;
                                    gap: 16px;
                                    padding:19px;
                                    width: 100%;
                                    border: 2px solid #f79009;
                                        border-radius: 24px;
                                }
                
                                .clients-subtitle {
                                    background: #7f56d9;
                                    border-radius: 28px;
                                    width: 100%;
                                    font-family: var(--font-family);
                                        font-weight: 400;
                                        font-size: 14px;
                                        line-height: 0%;
                                        text-align: center;
                                        color: #f6f6f8;
                                        padding: 20px 5px;
                                        text-align: center;
                                }
                
                                .clients-img {
                                    object-fit: cover;
                                    border-radius: 24px;
                                        width: 315px;
                                        height: 229px;
                                }
                
                                .stat {position: relative;
                                    z-index: 1;}
                
                                   .stat>.container2{
                                        display: flex;
                                            flex-direction: column;
                                            padding: 50px 20px 0 20px;
                                            gap: 0px;
                                            align-items: center;
                                            justify-content: space-between;
                                            position: relative;
                                            max-width: 390px;
                                            min-width: 390px;
                                            position: relative;
                                   }
                                   
                                   
                                   .stat-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 26px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                    color: #f6f6f8;
                                    margin-bottom: 25px;


                                   }
                                 .stat-title>span {
                              
                                     color: #9e77ed;
                
                
                                 }



                                .stat-box {
                                    width: 100%;
                                    border-radius: 24px;
                                    background: #7f56d9;
                                    display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: space-between;
                                       padding: 17px;
                                        gap: 20px;
                                        
                                }
                
                                .stat-text {
                                    border-radius: 59px;
                                    width: 100%;
                                    background: #343454;
                                    font-family: var(--font-family);
                                        font-weight: 400;
                                        font-size: 14px;
                                        line-height: 0%;
                                        text-align: center;
                                        color: #f6f6f8;
                                        padding: 15px;
                                        text-align: center;
                            }
                
                                .stat-img {
                                    border-radius: 24px;
                                        width: 315px;
                                        height: 234px;
                                }
               
                                .stat-bbox{
                                    background: none;
                                    margin-top: 50px;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    gap:0px;
                                    text-align: center;
                                }

.stat-link{
    border-radius: 360px;
        padding: 8px 24px;
        width: 141px;
        height: 48px;
        background: #7f56d9;
        font-family: var(--font-family);
            font-weight: 600;
            font-size: 16px;
            line-height: 138%;
            text-align: center;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
                z-index: 1;
}

                                .stat-btext {
                                    position: relative;
                                        z-index: 1;
                                    font-family: var(--second-family);
                                        font-weight: 500;
                                        font-size: 28px;
                                        line-height: 129%;
                                        color: #f6f6f8;
                                        text-transform: uppercase;
                                }
                
                                .a {
                        display: inline-block;
                            transform: rotate(90deg);
                                }
                
                                .b {color: #9e77ed;}
                
                                .consult>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding: 50px 20px 0 20px;
                                    gap: 0px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 390px;
                                    min-width: 390px;
                                    position: relative;
                                }
                
                                .consult-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 26px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 26px;
                                        position: relative;
                                            z-index: 1;
                                }
                                .consult-line{
                                    position: absolute;
                                    top:-350px;
                                    right:10px;
                                    z-index:0;
                                    width: 300px;
                                    height: 1227px;
                                }




.consult-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index:1;
    width: 100%;
    gap: 50px;
}

.consult-left {
    padding-top:0px;
    height: 100%;
    display: flex;
   gap: 25px;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.consult-right {
    display: flex;
    flex-direction: column;
    gap:26px;
    width: 100%;
}

.consult-title-form {
border: 2px solid #7f56d9;
    border-radius: 360px;
    padding: 3px 12px;
    width: 100%;
    height: 28px;
    background: #343454;
    font-family: var(--font-family);
        font-weight: 500;
        font-size: 14px;
        line-height: 120%;
        text-align: center;
        color: #f6f6f8;
        
}

.consult form{
    border-radius: 24px;
        padding: 8px 24px 24px;
        width: 100%;
        height: fit-content;
        max-height: 820px;
        box-shadow: 0 0 40px 0 rgba(195, 195, 195, 0.25);
            background: #f6f6f8;
}
.consult  .modal-form{
    gap:0;
}
.consult form button{
    width: 100%;
}

.consult form button:disabled {
    background: #e4e4ec;
}

.consult .questing-cont-list {
    border: 2px solid #f79009;
        border-radius: 24px;
        padding: 24px;
        width: 100%;
}

.questing-cont-item {}

.questing-label {}

.questing-link {}


                                .read>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding: 50px 20px 0 20px;
                                    gap: 0px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 390px;
                                    min-width: 390px;
                                    position: relative;
                                }
                


                                        .read-line {
                                            position: absolute;
                                            top: -0px;
                                            right: 50px;
                                            z-index: 0;
                                            width: 400px;
                                            height: 1176px;
                                            z-index: 0;
                                        }
                                .read-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 26px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 31px;
                                            position: relative;
                                                z-index: 1;
                                }
                               .read-title>span{
                                color: #9e77ed;
                               }


                                .read-box {
                                    border: 2px solid #f79009;
                                        border-radius: 24px;
                                        padding: 16px;
                                        display: flex;
                                        flex-direction: column;
                                        gap: 16px;
                                        align-items: center;
                                            position: relative;
                                                z-index: 1;
                                                background: #343454;
                                }
                
                                .read-text {
                                    font-family: var(--font-family);
                                        font-weight: 500;
                                        font-size: 16px;
                                        line-height: 120%;
                                        text-align: center;
                                        color: #f6f6f8;
                                }
                
                                .read-link {
                                border-radius: 360px;
                                    padding: 8px 24px;
                                    width: 104px;
                                    height: 48px;
                                    background: #7f56d9;
                                    font-family: var(--font-family);
                                        font-weight: 600;
                                        font-size: 16px;
                                        line-height: 138%;
                                        text-align: center;
                                        color: #fff;
                                        padding: 20px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                }
                
                                .quest>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding:50px 20px 0 20px;
                                    gap: 0px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 390px;
                                    min-width: 390px;
                                    position: relative;
                                    z-index: 1;
                                }
                
                                .quest-title {
                                    margin-bottom: 35px;
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 26px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                }
                
                                .quest-title>span{
                                    color: #9e77ed;
                                }
                
                                .quest-list {
                                    display: flex;
                                    width: 100%;
                                    flex-direction: column;
                                    gap:16px;

                                }
                
                                .quest-item 
                                {
                                    display: flex;
                                    flex-direction: row;
                                    gap:19px;
                                    background: #7f56d9;
                                    width: 100%;
                                height: fit-content;
                                padding: 10px;
                                border-radius: 24px;
                                }
                                  .quest-item.active{
                                    background: #f6f6f8;
                                  }

                                .quest-number {
                                   
                                    margin-top: 5px;
                                    width: 15px;
                                    height: 15px;
                                    border-radius: 100%;
                                        background: #f6f6f8;
                                        font-family: var(--font-family);
                                            font-weight: 600;
                                            font-size: 10px;
                                            line-height: 120%;
                                            text-align: center;
                                            color: #343454;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                }

                                .active  .quest-number{
                            background: #7f56d9;
                            color: #f6f6f8;
                                }
                
                                .quest-tbox {
                                    display: flex;
                                    flex-direction: column;
                                    width: calc(100% - 100px);
                                    gap: 10px;
                                }
                
                                .quest-quest {
                                    font-family: var(--font-family);
                                        font-weight: 600;
                                        font-size: 16px;
                                        line-height: 120%;
                                        color: #f6f6f8;
                                        
                                }
                
                                           .active .quest-quest {
                                            color: #343454;
                                           }


                                .quest-answer 
                                {
                                    font-family: var(--font-family);
                                        font-weight: 400;
                                        font-size:12px;
                                        line-height: 120%;
                                        text-align: justify;
                                        color: #343454;
                                        display: none;
                                }
                                 
                                .active .quest-answer {
                                    display: block;
                                }

                                  





                                .quest-plus {
                                    cursor: pointer;
                                    width: 27px;
                                     height: 27px;
                                        background: #343454;;
                                        border-radius: 100%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-family: var(--font-family);
                                            font-weight: 600;
                                            font-size: 18px;
                                            line-height: 120%;
                                            text-align: center;
                                            color: #f6f6f8;
                                }
                
  .active .quest-plus{transform: rotate(45deg);}


                                .update>.container2 {
                                    display: flex;
                                    flex-direction: column;
                                    padding: 50px 20px 50px 20px;
                                    gap: 25px;
                                    align-items: center;
                                    justify-content: space-between;
                                    position: relative;
                                    max-width: 390px;
                                    min-width: 390px;
                                    position: relative;
                                }
                
                                .update-title {
                                    font-family: var(--second-family);
                                        font-weight: 700;
                                        font-size: 26px;
                                        line-height: 110%;
                                        text-align: center;
                                        text-transform: uppercase;
                                        color: #f6f6f8;
                                        margin-bottom: 0;
                                }
                
                                    .update-title>span {
                                    color: #9e77ed;
                                    }















                          }


                                                 .heronew-cafe-slider {
                                                      width: 100%;
                                                      max-width: 100%;
                                                      min-width: 0;
                                                      overflow-x: auto;
                                                      overflow-y: hidden;
                                                      cursor: grab;
                                                      user-select: none;
                                                      -webkit-user-select: none;
                                                      -webkit-overflow-scrolling: touch;
                                                      touch-action: pan-x;
                                                      overscroll-behavior-x: contain;
                                                      position: relative;
                                                      z-index: 2;
                                                      display: block;
                                                      scrollbar-width: none;
                                                  }
                        
                                                  .heronew-cafe-slider::-webkit-scrollbar {
                                                      display: none;
                                                  }
                        
                                                  .heronew-cafe-slider.dragging {
                                                      cursor: grabbing;
                                                  }
                        
                                                  .heronew-cafe-list {
                                                      display: flex;
                                                      flex-wrap: nowrap;
                                                      align-items: center;
                                                      justify-content: flex-start;
                                                      gap: 32px;
                                                      width: max-content;
                                                      min-width: max-content;
                                                      margin-top: 25px;
                                                      padding: 0;
                                                      flex-shrink: 0;
                                                      transform: none;
                                                      pointer-events: auto;
                                                  }
                        
                                                  .heronew-cafe-item {
                                                      flex: 0 0 268px;
                                                  }
                        
                                                  @media (max-width: 768px) {
                                                      .heronew-cafe-slider {
                                                          overflow-x: auto !important;
                                                          overflow-y: hidden !important;
                                                          touch-action: pan-x;
                                                      }
                        
                                                      .heronew-cafe-list {
                                                          width: max-content !important;
                                                          min-width: max-content !important;
                                                      }
                                                  }