*{
    font-family: 'Amatic SC', cursive;
}

a{
    text-decoration: none;
}

/*Nav section*/
.nav-section button{
    color: white;
}
.navbar{
    padding: 20px 30px;
    font-size: 2rem;
    
}

.navbar-brand{
    font-size: 1.1em;
    color: white;
}


/*Intro section*/
#home{
    margin-top: 5%
}

.business-image img{
    display: block;
  margin-left: auto;
  margin-right: auto;
}
/*About section*/
#about{
    margin: 10% 5%;
    color: whitesmoke;
}

.about{
    border: 4px solid rgb(47, 186, 47);
    border-radius: 30px;
    padding: 2% 2%;
    justify-content: center;
    justify-items: center;
    height: 600px;

    background-image: url('images/img1.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
    opacity: 0.85;
}

.description-about{
    margin-top: 15%;
}

/*Products section*/
#products{
    margin: 10% 5%;
    color: white;
}

.products{
    border: 4px solid rgb(238, 122, 122);
    border-radius: 30px;
    padding: 2% 2%;
    justify-content: center;
    justify-items: center;
    height: 600px;

    animation: change-bg 10s steps(2, jump-none) forwards infinite;
    opacity: 0.85;
}

@keyframes change-bg {
    0%, 100%  { background: url(images/imgProduct/image1.jpg); }
    20% { background: url(images/imgProduct/img2.jpg); }
    40% { background: url(images/imgProduct/img3.jpg); }
}

.description-products{
    margin-top: 15%;
}

/*Our menu section*/
#menu
{
    margin: 10% 5%;
}

.menu{
    border: 4px solid rgb(47, 186, 47);
    border-radius: 30px;
    padding: 2% 2%;
    justify-content: center;
    justify-items: center;
    height: 600px;
}

.menu h1{
    padding-top: 2%;
    padding-bottom: 5%;
}

hr{
    border-top: 2px solid rgb(47, 186, 47);
}

/*Order*/

#order{
    margin: 10% 5%;
}

.order{
    border: 4px solid rgb(212, 71, 71);
    border-radius: 30px;
    padding: 0% 2%;
    justify-content: center;
    justify-items: center;
    height: 650px;
}

.order h1{
    margin-top: 3%;
}

.order h3{
    color: red;
    font-size: 2.3em;
    visibility: hidden;
}

#formOrder{
    margin-top: 5%;
    
}

#orderName, #orderEmail, #orderTel, #selectProduct, #data, #selectHour{
    width: 350px;
    border-top: transparent;
    border-bottom: 3px solid rgb(212, 71, 71);
    border-left: solid rgb(212, 71, 71);
    border-right: solid rgb(212, 71, 71);
    border-radius: 15px;
}

.name, .email, .tel, .select, .data, .hours{
    margin-left: 10%;
    margin-top: 0;
    font-size: 1.8em;
}

#tortelini, #primi, #secondi,#deserti{
    color:rgb(212, 71, 71) ;
}

.btn{
    width: 200px;
    height: 70px;
    font-size: 1.8em;
    border-radius: 40%;
    border: 3px solid;
    opacity: 0.75;
    justify-content: center;
    
    margin: 5%;
}

/*Contact us*/
#contacts{
    margin: 10% 5%;
}
.contacts{
    border: 4px solid rgb(47, 186, 47);
    border-radius: 30px;
    justify-content: center;
    justify-items: center;
    height: 700px;
}

.contacts h1{
    padding: 3% 0;
}

.maps{
    margin: 0 3%;
}


.maps h3{
    padding: 3% 0;
}

.iframe{
    width: 700px;
    height: 400px;
}

.phone-email{
    margin-top: 10%;
}

.phone-email a{
    font-size: 2em;
    color: black;
}

.phone-email i{
    font-size: 2.8rem;
    padding: 10% 0;
    color: rgb(31, 168, 31);
    transform: all 1s;
}

.phone-email i:hover{
    font-size: 2.4em;
    transform: scale(1.1);
    color:rgb(212, 71, 71) ;
}

/*Footer*/
#footer{
    margin: 10% 0 0 0;
    background-color: rgb(212, 71, 71);
    opacity: 0.75;
    color: white;
    width: auto;
}

#footer i{
    color: white;
    font-size: 1.6em;
    margin: 0 15px;
    transform:  all 1s;
}

#footer i:hover{
    color: rgb(31, 168, 31);
    font-size: 2em;
    transform: scale(1.1);
}

.tech, .service a{
    text-decoration: none;
    color: white;
    transform: all 1s;
    cursor: pointer;
}

.tech:hover, .service a:hover{
    transform: scale(1.1);
    color: rgb(31, 168, 31);
}

.service .offcanvas{
    height: 600px;
    font-size: 1.4em;
    color: black;
    background-color: white;
    
}
.social{
    padding: 3% 0;
}
.social i{
    transform: all 1s;
}

.social i:hover{
    font-size: 2em;
    transform: scale(1.1);
    color: rgb(31, 168, 31);
}

/*Media screen*/
@media screen and (min-width: 200px) and (max-width: 767px) {
    .offcanvas{
        max-width: 60%;
    }
    /*Intro section*/
    .business-image img{
        display: block;
        margin-top: 20%;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    /*About section*/
    .about{
        height: 400px;
    }
    .description-about{
        margin-top: 20%;
    }
    
    /*Products section*/
    .products{
        height: 400px;
    }
    .description-products{
        margin-top: 20%;
    }

    /*Our menu section*/
    .menu{
        height: auto;
    }

    /*Order section*/
    .order{
        height: auto;
    }
    #orderName, #orderEmail, #orderTel, #selectProduct, #data, #selectHour{
        width: 250px;
        justify-content: center;
        justify-items: center;
    }
    .btn{
        width: 150px;
        margin-top: 5%;
        font-size: 1.3em;
        justify-content: center;
        justify-items: center;
    }
    
    /*Contacts section*/
    .contacts{
        height: auto;
    }

    .contacts h1{
        margin-top: 3%;
    }

    iframe{
        margin-top: 10%;
        margin-left: 6%;
        width: 250px;
        height: 200px;
        justify-content: center;
    }

    /*Footer section*/
    .service .offcanvas{
        max-width: 800px;
        max-height: 500px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px)  {
    .offcanvas{
        max-width: 60%;
    }
    /*Intro section*/
    .business-image img{
        display: block;
        margin-top: 5%;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }
    /*About section*/
    .about{
        height: 400px;
    }
    .description-about{
        margin-top: 15%;
    }
    
    /*Products section*/
    .products{
        height: 400px;
    }
    .description-products{
        margin-top: 10%;
    }

    /*Our menu section*/
    .menu{
        height: auto;
    }

    /*Order section*/
    .order{
        height: auto;
    }
    #orderName, #orderEmail, #orderTel, #selectProduct, #data, #selectHour{
        width: 500px;
        justify-content: center;
        justify-items: center;
    }
    .btn{
        width: 150px;
        margin-top: 5%;
        font-size: 1.3em;
        justify-content: center;
        justify-items: center;
    }
    
    /*Contacts section*/
    .contacts{
        height: 500px;
    }

    .contacts h1{
        margin-top: 3%;
    }

    iframe{
        margin-top: 5%;
        margin-left: 5%;
        width: 320px;
        height: 200px;
    }

    /*Footer section*/
    .service .offcanvas{
        max-width: 600px;
        max-height: 300px;
    }
}