@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Satisfy&family=Tilt+Neon&display=swap');



*{
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
    outline: none;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
    box-sizing: border-box;
    text-decoration: none;
    transition: all 180ms linear;
}


:root{
    --fontLogo:"Satisfy", cursive;
}


html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 6rem;
}



html::-webkit-scrollbar{
    width: .8rem;
}
 html::-webkit-scrollbar-track{
    background:#252525;
}
 html::-webkit-scrollbar-thumb{
    background:rgb(153, 153, 153);
    border-radius: 17px;
    cursor:grab;
}
body{
    background: linear-gradient(45deg, #020405, #0c4a58);
    cursor: default;
}







section{
    min-height: 100dvh;
    padding: 2rem 7%;
    cursor: default;
}





/*Sección Intro Empieza*/
.intro{
    margin-top: 5.3rem;
    background: #111;
    width: 100%;
    display: flex;
    padding: .5rem 3% 1rem 3%;
    position: relative;

}

.intro .tag{
    width: 5rem;
    background: linear-gradient(0, #333, #000);
    height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: .5rem;
    border-radius: 7px;
    margin-right: 150%;
    transform: translateY(-5rem);
    outline: 2px solid orange;
    box-shadow: 0 5px 10px rgba(255, 166, 0, 0.788);
    align-items: center;
    position: absolute;
    top: 0;
    left: 2rem;
    z-index: 2;
}

.intro .tag h1{
    font-size: clamp(.6rem, 2vw, .8rem);
    margin-bottom: 1rem;
    color: greenyellow;
    font-weight: 400;
    text-align: center;
}
.intro .tag img{
    width: 100%;
}

.intro .tag p{
    color: #c2c2c2;
    font-size: clamp(.6rem, 2vw, .7rem);
}


.intro .container{
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.intro .container .imgCont{
    height: 25rem;
}

.intro .container .imgCont img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 7px;
}

.intro .container .textContent{
    flex: 1 1 35rem;
    padding: 1rem;
    background: #171624;
    border-radius: 7px;
    width: 100%;
}

.intro .container .textContent h1{
    color: #e1feff;
    font-size: clamp(1.5rem, 5vw, 3rem);
    font-weight: 500;
}
.intro .container .textContent h1 span{
    color: #ff9900;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness:1px;
    text-underline-offset: 3px;
}
.intro .container .textContent .pCont{
    color: #e1feff;
    background: #2c2c2c;
    padding: .3rem;
    border-radius: 7px;
    width:fit-content;
}

.intro .container .textContent .btnCont{
    margin-top:3rem;
}

.intro .container .textContent .btnCont a{
    padding: .5rem 3rem;
    background: #00478a;
    border-radius: 5px;
    color: #fff;
    font-weight: 800;
}
.intro .container .textContent .btnCont a:hover{
    background: #0025cc;
}
/*Sección Intro Termina*/


/*Others Empieza*/
.others{
    padding: 2rem 7%;
    min-height: 10dvh;
    background: #f2f7ff;
    display: flex;
    gap: .5rem;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}
.others h1{
    color: #003246;
    width: 100%;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.others .container{
    padding: .5rem;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 15px rgba(0,0,0, .080);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
}

.others .container a{
    font-size: 400;
    color: #333;
    background: #eee;
    padding: .5rem;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: clamp(.6rem, 2vw, 1rem);
}
.others .container a img{
    width: 5rem;
}
/*Others Termina*/







/*Sección Services Empieza*/
.services{
    min-height: 10dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
}

.services .containerProducts{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
    width: 100%;
    justify-content: center;
    background: #001c22;
    padding: .5rem;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    border-radius: 7px;
}
.services .containerProducts a{
    flex: 1 1 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 8px 15px rgba(102, 102, 102, .090);
    height: 5rem;
    color: #fff;
}
.services .containerProducts a i{
    font-size:1.7rem;
}



.services .containerProducts .pizzas{
    background: radial-gradient(circle at top right, #4e0027 -90% -100%, #161616 100%);
}
.services .containerProducts .veggies{
    background: radial-gradient(circle at top right, #004625 -90% -100%, #161616 100%);
}
.services .containerProducts .calzoni{
    background: radial-gradient(circle at top right, #462800 -90% -100%, #161616 100%);
}
.services .containerProducts .picar{
    background: radial-gradient(circle at top right, #07006b -90% -100%, #161616 100%);
}
.services .containerProducts .postres{
    background: radial-gradient(circle at top right, #4e016d -90% -100%, #161616 100%);
}
.services .containerProducts .bebidas{
    background: radial-gradient(circle at top right, #003246 -90% -100%, #161616 100%);
}
.services .containerProducts .fifty{
    background: radial-gradient(circle at top right, #5c5e00 -90% -100%, #161616 100%);
}



.services .containerProducts .pizzas i{
    color: #ffa500;
}
.services .containerProducts .veggies i{
    color: #00ff2a;
}
.services .containerProducts .calzoni i{
    color: #ffd900;
}
.services .containerProducts .picar i{
    color: #00a2ff;
}
.services .containerProducts .postres i{
    color: #cc00ff;
}
.services .containerProducts .bebidas i{
    color: #00eeff;
}
.services .containerProducts .fifty i{
    color: #ffd900;
}










.services .container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
    gap: .2rem;
    border-radius: 7px;
    background: #011E24;
    padding: 1rem;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    width: 100%;
}

.services .container .card{
    padding: .5rem;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 12rem;
}
.services .container .card .svg{
    font-size: 2.5rem;
    margin-right: 2rem;
    margin-left: 2rem;
}

.services .container .card .textCont h1{
    font-size: 1.3rem;
    font-weight: 400;
    color: #bbb;
}
.services .container .card .textCont p{
    color: #0fa1db;
}
.services .container .card .textCont p strong{
    color: #09f1bf;
    
}

.services .container .delivery i{
    color: #09f1bf;

}


.services .container .delivery{
    background: radial-gradient(circle at top right, #003d75 -90% -100%, #0f0f0f 90%);
}
.services .container .recipe{
    background: radial-gradient(circle at top right, #00595c -90% -100%, #0f0f0f 90%);
}

.services .container .recipe .svg i{
    color: orange;
}
.services .container .recipe .textCont h1{
    color: #bbb;
}
.services .container .recipe .textCont p{
    color: rgb(255, 255, 138);
}

.services .container .recipe .textCont p strong{
    color: orange;
}
/*Sección Services Termina*/



.news{
    min-height: 20dvh;
    width: 100%;
    background: #f2f7ff;
}

.news .container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    width: 100%;
    gap: 1.5rem;
}
.news .container .instagram-media{
    border-radius: 7px !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.080) !important;
}





.aboutUS{
    background: #f6fbff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20dvh;
    padding: 2rem 7%;
    flex-direction: column;
    row-gap: 2rem;
    border-bottom: 1px solid #d3d3d3;
}
.aboutUS .enlace{
    padding: .5rem;
    border-radius: 15px;
    background: linear-gradient(0, black, rgb(51, 51, 51));
    width: 100%;
    display: flex;
    min-height: 20dvh;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 15px rgba(102, 102, 102, .090);
}
.aboutUS .enlace img{
    height: 5rem;
}
.aboutUS .enlace h1{
    font-family: var(--fontLogo) !important;
    color: rgb(255, 255, 255);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
}

.aboutUS .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    row-gap: 2rem;
}
.aboutUS .container .box{
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 26, 59, 0.411);
    width: 100%;
    padding: .5rem;
    background: linear-gradient(0, #000, #001a3d);
    min-height: 20dvh;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.aboutUS .container .box img{
    height: 10rem;
    width: 10rem;
    object-fit: contain;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #adadad;
}

.aboutUS .container .masa img,
.aboutUS .container .payment img{
    border: none;
}

.aboutUS .container .box span{
    color: #fff;
    font-style: oblique;
}


.aboutUS .container .ivano{
    filter: saturate(75%);
}

.aboutUS .container .box h2{
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #ffffff;
    font-weight: bolder;
    font-weight: 400;
}
.aboutUS .container .box h3{
    color: orange;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
}

.aboutUS .container .box p{
    color: #daffff;
    font-weight: 300;
    font-size: .8rem;
}
.aboutUS .container .box a{
    padding: .5rem 1.5rem;
    border-radius: 25px;
    background: #bbff00;
    width: max-content;
    color: #000;
    font-weight: 700;
    margin-top: 2rem;
}
.aboutUS .container .box a:hover{
    background: #00ff15;
}

.aboutUS .container .fifty .imgContfifty{
    display: flex;
    width: 100%;
}





.aboutUS .container .fifty .imgContfifty .imgLeft{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 10rem;
    width: 5rem;
    transform: rotateZ(10deg);
}

.aboutUS .container .fifty .imgContfifty .imgRight{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 10rem;
    width: 5rem;
    transform: rotateZ(10deg);
    margin-left: 1rem;
}

.aboutUS .container .fifty .imgContfifty .imgLeft img{
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    border: none;
}
.aboutUS .container .fifty .imgContfifty .imgRight img{
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    border: none;
}








@media(max-width:1200px){
    .intro{
        margin-top: 4.2rem;
    }
}