.h_gallery_item{
    cursor:pointer;
    text-align:center;
    padding:10px;
    border-radius:14px;
    transition:all 0.25s ease;
  /*  opacity:0;*/
    transform:translateY(15px);
}

.h_gallery_item.show{
    opacity:1;
    transform:translateY(0);
}

.h_gallery_item::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    border:2px solid #FFF200;
    opacity:0;
    transition:.3s;
}

.h_gallery_item:hover::before{
    opacity:1;
    animation: runBorder 1.5s linear infinite;
}

@keyframes runBorder{
    0% { clip-path: inset(0 100% 98% 0); }
    25% { clip-path: inset(0 0 98% 0); }
    50% { clip-path: inset(0 0 0 98%); }
    75% { clip-path: inset(98% 0 0 0); }
    100% { clip-path: inset(0 100% 98% 0); }
}

.h_gallery_item:hover{
    transform:translateY(-6px) scale(1.05);
    background:rgba(255,255,255,0.04);
    box-shadow: 
        0 10px 25px rgba(0,0,0,0.2),
        0 0 2px rgba(255,215,0,0.7);
}

/*.h_gallery_item img{
    width:70px;
}*/

.menu-title{
    margin-top:10px;
    font-size:14px;
}

.modal-content{
    border-radius:16px;
}

#splash{
    position:fixed;
    width:100%;
    height:100dvh;
    background:#0C2F53;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    transition:opacity .8s ease;
}


.splash-logo{
    width:90px;
    position:relative;
    z-index:2;
    animation:logoFade 1.5s ease;
}


.polygon-wrap{
    position:relative;
    width:150px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.polygon{
    position:absolute;
    width:150px;
    height:150px;
    border:5px solid rgba(255,255,255,0.4);
    clip-path:polygon(
        50% 0%, 95% 25%, 95% 75%,
        50% 100%, 5% 75%, 5% 25%
    );
    animation:rotatePolygon 3s linear infinite;
}


@keyframes rotatePolygon{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@keyframes logoFade{
    from{ opacity:0; transform:scale(2.8); }
    to{ opacity:1; transform:scale(1); }
}

.floating-overlay{
    /* position:fixed;
    inset: 0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    z-index:9999;
    overflow-y: auto;         
    -webkit-overflow-scrolling: touch; */

    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);

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

    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    z-index:9999;

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    padding:40px 15px; 
    pointer-events:none; 
}

.floating-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.floating-box{
    
    /* background:white; */
    /* color:#0c1760;
    border-radius:18px; */
    padding:30px;
    width:100%;
    transform:scale(.9);
    transition:.3s ease;
    /* box-shadow:0 20px 50px rgba(0,0,0,.35); */
}

.floating-overlay.active .floating-box{
    transform:scale(1);
}

.floating-title{
    font-weight:500;
    margin-bottom:20px;
}

.floating-grid{
    display:flex;
    flex-direction:row;
    /* flex-wrap:wrap; */
    justify-content:center;
    gap:15px;
}

.float-app{
    width:250px;
    text-align:center;
    padding:18px 10px;
    border-radius:16px;
    background:#f4f6fb;
    cursor:pointer;
    transition:.25s ease;
}
/* .float-app::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:12px;
    border:2px solid #FFF200;
    opacity:0;
    transition:.3s;
}

.float-app:hover::before{
    opacity:1;
    animation: runBorder 1.5s linear infinite;
} */

.float-app:hover{
    transform:translateY(-3px) scale(1.05);
    background:#f4f6fb;
    box-shadow: 
        0 10px 25px rgba(0,0,0,0.25),
        0 0 6px rgba(255,242,0,0.6);
}


.float-app img{
    width: 100%;
    margin-bottom:8px;
}

.voice-btn{
    padding:5px 10px;
    border:none;
    border-radius:8px;
    background:#fff200;
    color:#0c2f53;
    cursor:pointer;
}
.voice-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    z-index:9999;
}


.voice-overlay.active{
    opacity:1;
    visibility:visible;
}

/* .voice-popup{
    position:relative; 
    width:360px;
    background:rgba(255,255,255,0.95);
    border-radius:20px;
    padding:30px 25px 25px;
    box-shadow:0 25px 60px rgba(0,0,0,.3);
    text-align:center;
} */

.voice-popup{
    background:white;
    width:360px;
    border-radius:16px;
    padding:25px;
    text-align:center;
    transform:scale(.9);
    transition:.3s;
}

.voice-overlay.active .voice-popup{
    transform:scale(1);
}

.voice-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.record-circle{
    width:70px;
    height:70px;
    background:#ff4d4f;
    border-radius:50%;
    margin:auto;
    animation:pulse 1.2s infinite;
}

@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(255,77,79,.6);}
    70%{box-shadow:0 0 0 20px rgba(255,77,79,0);}
    100%{box-shadow:0 0 0 0 rgba(255,77,79,0);}
}

.voice-text{
    margin-top:15px;
    font-size:16px;
    color:#333;
}
.voice-close{
    position:absolute;
    top:15px;
    right:15px;
    border:none;
    background:none;
    font-size:20px;
    cursor:pointer;
    opacity:.5;
    transition:.2s;
}

.voice-close:hover{
    opacity:1;
}
.modal-close{
    position:absolute;
    top:10px;
    right:12px;
    border:none;
    background:none;
    font-size:22px;
    cursor:pointer;
    color:#878686;
    transition:.2s;
}

.modal-close:hover{
    color:#c5c4c4;
    transform:scale(1.2);
}


@media (max-width: 768px){
    .floating-grid{
        flex-direction:column;
        align-items:center;
    }

    .floating-box{
        padding:30px;
        width:95%;
        max-width:500px;

        max-height:90dvh;  
        overflow-y:auto;

        transform:scale(.9);
        transition:.3s ease;
    }

    .float-app{
        width:60%;
        max-width:280px;
    }


    .float-app img{
        width:100%;
    }
}