.restBanner{
    position: fixed;
    inset: 0;
    min-height: 100svh;
    z-index: 400;
    background: url(/images/resources/bgRest.png) no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: .3rem;
    font-family: system-ui, sans-serif !important;
    padding: .5rem 1rem;
    pointer-events: none;
    visibility: hidden;
}

.restBanner.active{
    visibility: visible;
    pointer-events: all;
}

.restBanner .logoRest{
    width: clamp(3.5rem, 5vw, 10rem);
    filter: drop-shadow(0 3px 5px #000);
}

.restBanner .restGuy{
    width:25%;
    filter: drop-shadow(0 3px 5px #00063b);
}

@media (max-width:500px){
    .restBanner .restGuy{
        width: 100%;
    }

}

.restBanner p{
    color: #fff;
}

.parraf001{
    display: flex;
    flex-direction: column;
    font-size: clamp(2rem, 2vw, 3.5rem);
    row-gap: .3rem;
    width: 100%;
    font-weight: 700;
}
.parraf001 span{
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: lighter;
}

.restOut{
    width: max-content;
    font-size: clamp(1rem, 3vw, 2rem);
    background: linear-gradient(0, #ff00d4, #d400ff);
    border-radius: .7rem;
    padding: 0 .5rem;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0, .080);
}

.parraf002,
.parraf003,
.parraf004{
    font-size: clamp(.8rem, 2vw, 1rem);
}

.linksSections{
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding:.2rem;
    border-radius: .5rem;
}
.linksSections a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(.7rem, 2vw, 1rem);
    background:#ffff;
    padding: .3rem;
    border-radius: .5rem;
    color: #646464;
    box-shadow: 0 3px 7px rgba(0,0,0, .380);
}
.linksSections a:hover{
    background: #444;
    color: #fff;
}

.ourSocial{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: max-content;
    border-radius: .5rem;
    background: linear-gradient(0, #222, #333);
    padding: 0 .2rem;
}
.ourSocial a{
    height: clamp(2rem, 2vw, 2.5rem);
}

.ourSocial a svg{
    height: clamp(2rem, 2vw, 2.5rem);
    fill: #a8a8a8;
}
.ourSocial a:hover svg{
    fill: #ff9900;
}

.btnRest{
    margin-top: auto;
    margin-bottom: 1rem;
    width: max-content;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    margin-left: 50%;
    transform: translateX(-50%);
    font-weight: bolder;
    padding: 0rem 2rem;
    border-radius: 8rem;
    background: #333;
    color: #feee;
    border: 2px solid #fff;
    cursor: pointer;
}
.btnRest:hover{
    background: #000000;
    color: #fff;
}

.stopScroll.active{
    overflow: hidden;
}