/* VARIABILI */
/* Colors */
:root{
    --primary-color: #91B3BA;
    --secondary-color: #E4EFF0;
    --tertiary-color: #F7EEEB;
}
/* Fonts */
@font-face {
    font-family: 'Parking';
    src: url("../fonts/PARKING-Regular.otf");
}
@font-face {
    font-family: 'Argesta';
    src: url("../fonts/ArgestaText-Regular.otf");
}

/* RESET */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* COMMON */
body{
    font-family: 'Parking', Helvetica, sans-serif;
    color: var(--primary-color);
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-col-center{
    display: flex;
    flex-direction: column;
    align-items: center;
}
a{
    text-decoration: none;
    color: inherit;
}
#canvas-1{
    background-color: transparent;
    width: 100vw;
    height: 1200px;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: absolute;
    z-index: -1;
}
/* COMMON END */

/* HEADER */
.header-background{
    /*background-image: url("../img/background/bubble.svg");*/
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: -1;
}
/* HEADER END */

/* MAIN */
/* Heading section */
.heading-container{
    text-align: center;
    padding-top: 40px;

}
.heading-container h1{
    font-size: 3.5rem;
    margin-bottom: 40px;
    font-weight: 100;
    color: black;
}
.heading-container p{
    font-size: 1.63rem;
    color: black;
    font-family: 'Argesta', 'Helvetica', sans-serif;
}
.promotion-shape{
    position: relative;
}
.promotion-shape img{
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.pulsante.primario{
    height: 76px;
    width: 288px;
    color: white;
    background-color: var(--primary-color);
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 70px auto 0 auto;
    cursor: pointer;
    /* Bounce in effect */
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.pulsante.primario:hover,
.pulsante.primario:active{
    /* Bounce in effect */
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
/* Heading section end */

/* Products section */
.products-background{
    background-image: url("../img/background/wave.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    height: 1140px;
    /*margin-top: 60px;*/
}
.products-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0 150px;
}
.products-container img{
    width: 165px;
}
.box{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 300px;
}
.circle.box{
    background-image: url("../img/background/circle.svg");
    margin-top: 120px;
    padding-top: 190px;
}
.rectangle.box{
    background-image: url("../img/background/shape.svg");
    /*margin-top: 380px;*/
    padding-top: 205px;
    margin: 380px 20px 0 20px;
}
.window.box{
    background-image: url("../img/background/arc.svg");
    margin-top: 150px;
    padding-top: 210px;
}
/*.product{*/
/*    width: 450px;*/
/*    height: 450px;*/
/*    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
/*    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);*/
/*    animation: morphing 10s infinite;*/
/*    overflow: hidden;*/
/*    background-color: var(--primary-color);*/
/*}*/
/*.circle.box,*/
/*.rectangle.box,*/
/*.window.box{*/
/*    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
/*    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);*/
/*    animation: morphing 10s infinite;*/
/*    overflow: hidden;*/
/*}*/
/*@keyframes morphing {*/
/*    0% {*/
/*        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
/*        box-shadow: 15px 15px 50px rgba(0,0,0,0.2);*/
/*    }*/
/*    25% {*/
/*        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;*/
/*    }*/
/*    50% {*/
/*        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;*/
/*        box-shadow: -10px -5px 50px rgba(0,0,0,0.2);*/
/*    }*/
/*    75% {*/
/*        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;*/
/*    }*/
/*}*/
.product span{
    color: black;
    font-size: 2.3rem;
    padding-top: 25px;
}
.pulsante.primario.long{
    width: 410px;
    margin-top: 270px;
}
/* Products section end*/

/* Shop section */
.shop-background{
    background-color: var(--secondary-color);
    height: 935px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.shop-img{
    width: 785px;
    height: 520px;
    margin: 0 auto 200px auto;
    padding-top: 120px;
}
.shop-img img{
    width: 100%;
}
.hours-box,
.place-box{
    font-size: 2.3rem;
    color: black;
    cursor: pointer;
    width: 400px;
    margin: auto;
    /* Wobble top effect */
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.place-box{
    display: block;
    cursor: pointer;
}
/* Wobble top effect */
.link:hover,
.link:active{
    -webkit-animation-name: link;
    animation-name: link;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
@keyframes link {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}
/* Wobble top effect end */
.hours-box{
    margin-bottom: 45px;
}
.open-hours{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 500px;
    width: 500px;
    background-color: #FBE6E9;
    box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
    /* padding: 30px; */
    color: black;
    border-radius: 50%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.day{
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.day:last-child{
    margin-bottom: 0;
}
/* Shop section end */

/* People section */
.people-pics-container{
    display: flex;
    flex-direction: row;
    padding: 140px 70px;
    justify-content: space-between;
}
.people-pics-container .col-left,
.people-pics-container .col-mid,
.people-pics-container .col-right{
    width: calc((100% / 3) - 20px );
    height: 625px;
}
.people-pics-container .col-left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.people-pics-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.people-pics-container .col-left .top-col,
.people-pics-container .col-left .bottom-col{
    height: 300px;
}


/* People section end */

/* Slogan section */
.slogan-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.slogan-container .col-left{
    background-image: url("../img/background/bubble-vertical-sx@2x.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
    height: 910px;
    width: 350px;
}
.slogan-container .col-right{
    background-image: url("../img/background/bubble-vertical-dx@2x.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    height: 910px;
    width: 350px;
}
.slogan-container .col-mid h2{
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 130px;
}
.slogan-container .col-mid div span{
    color: black;
    font-family: 'Argesta', 'Helvetica', sans-serif;
    font-size: 1.63rem;
    margin-top: 30px;
    margin-bottom: 50px;
}
/* Slogan section end */

/* Delivery section */
.delivery-container{
    background-color: var(--tertiary-color);
    padding: 108px 170px;
    margin-top: 100px;
    text-align: center;
}
.delivery-container img:first-child{
    margin-bottom: 40px;
}
.delivery-container h2{
    font-size: 3.5rem;
}
.delivery-container img:last-child{
    width: 200px;
    margin-top: 100px;
}
/* Delivery section end */

/* MAIN END */

/* FOOTER */
.footer-container{
    background-color: var(--tertiary-color);
    text-align: center;
    padding-bottom: 60px;
}
.footer-content{
    font-family: 'Argesta','Helvetica',sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.footer-content span{
    margin: 0 5px;
}
/* FOOTER END */

/* Media query ------------------------------------------------------------------------------------------------------*/

@media all and (max-width: 850px)  {
/*@media all and (max-width: 1200px)  {*/
    body{
        min-width: 320px;
    }
    /* HEADER */
    .header-background{
        height: 200px;
    }
    .logo img{
        width: 120px;
    }
    /* HEADER END */

    /* MAIN */
    /* Heading section */
    .heading-container h1{
        font-size: 2.2rem;
    }
    .heading-container p{
        font-size: 1rem;
    }
    .promotion-shape img{
        width: 50px;
    }
    .pulsante.primario{
        width: 200px;
        height: 50px;
        font-size: 1.5rem;
    }
    /* Heading section end */

    /* Products section */
    .products-background{
        height: 2000px;
        margin-top: -100px;
    }
    .products-container{
        flex-direction: column;
        padding: 0;
        align-items: center;
    }
    .circle.box{
        margin-top: 300px;
    }
    .rectangle.box{
        margin-top: 190px;
    }
    .window.box{
        margin-top: 230px;
    }
    .pulsante.primario.long{
        width: 200px;
        text-align: center;
        height: 85px;
        margin-top: 200px;
    }
    /* Products section end */

    /* Shop section */
    .shop-background{
        height: 650px;
    }
    .shop-img{
        width: 80%;
        margin: 0 auto;
        height: 450px;
    }
    .shop-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .hours-box{
        width: 50%;
        margin-top: 40px;
    }
    .open-hours{
        width: 300px;
        height: 300px;
    }
    .day{
        font-size: 1rem;
        margin-bottom: 15px;
    }
    .place-box{
        width: 70%;
    }
    /* Shop section end */

    /* People section */
    .people-pics-container{
        flex-direction: column;
        padding: 100px 30px;
    }
    .people-pics-container .col-left,
    .people-pics-container .col-right{
        width: 100%;
    }
    .people-pics-container .col-mid{
        width: 100%;
        margin: 25px 0;
    }
    /* People section end */

    /* Slogan section */
    .slogan-container .col-mid h2{
        font-size: 2rem;
        width: 150px;
        margin: 0 auto 130px auto;
    }
    .slogan-container .col-mid div span{
        font-size: 1rem;
        text-align: center;
    }
    /* Slogan section end */

    /* Delivery section */
    .delivery-container{
        padding: 100px 30px;
    }
    .delivery-container h2{
        font-size: 2rem;
    }
    /* Delivery section end */

    /* MAIN END */

    /* FOOTER */
    .footer-container{
        padding-bottom: 30px;
    }
    .footer-content{
        flex-direction: column;
    }
    .footer-content span:nth-child(2),
    .footer-content span:nth-child(4){
        display: none;
    }
    /* FOOTER END */
}