*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.container {
    width: 100%;
    /* border: 1px solid; */
}
.container .herosection{
    width: 100%;
    /* border: 1px solid; */
    background: url(https://demo.web3canvas.com/themeforest/tomato/img/bg2.png) no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
}
.herosection .bt1{
    width: 40px;
    height: 40px;
    border: 1px solid rgb(78, 78, 78);
    background-color: rgb(78, 78, 78);
    position:fixed;
    top: 140px;
    left: 0px;
}
.herosection .bt1 i{
    font-size: 20px;
    color: white;
}
.herosection .header{
    height: 50px;
    padding: 0px 10px;
    border: 1px solid rgb(20, 20, 20);
    background-color: rgba(20, 20, 20, 0.3);
    text-align: left;
}
.header img{
    padding: 8px;
}
.header nav i{
    font-size: 22px;
    color: white;
    position: absolute;
    top: 18px;
    right: 20px;
}
.header nav a{
    display: none;
}
.herosection .first .resto img{
    width: 222px;
    height: 200px;
    /* border: 1px solid; */
}
.herosection .first h1{
    font-family: "raleway";
    font-size: 42px;
    color: white;
    font-weight: bolder;
    margin: 20px 0px 20px 0px;
}
.herosection .first h3{
    font-family: "raleway";
    font-size: 24px;
    color: white;
    font-weight: lighter;
}
.first .bt2{
    display: none;
}
.history{
    width: 100%;
    /* border: 1px solid; */
}
.history .first{
    width: 100%;
    /* border: 1px solid; */
    padding: 15px;
    text-align: center;
}
.history .first h4{
    font-family: "raleway";
    font-size: 32px;
    color: #4b4741;
    font-weight: bolder;
    margin: 65px 0px 10px 0px;
}
.history .first h5{
    font-family: "josefin sans";
    font-size: 20px;
    color: #777;
    font-weight: lighter;
    margin: 0px 0px 10px 0px;
}
.history .first hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 0px auto;
}
.history .second{
    width: 100%;
    /* border: 1px solid; */
    padding: 20px;
}
.history .s1 #if1 {
    width: 100%;
    padding: 5px 5px;
}
.history .s1 #if2, #if3{
    display: none;
}
.history .s2 {
    width: 100%;
    /* border: 1px solid; */
}
.history .s2 p{
    font-family: "josefin sans";
    font-size: 22px;
    color: #828281;
    font-weight: lighter;
    line-height: 31px;
}
.history .s2 img{
    margin: 0px 0px 20px 0px;
}
.special {
    width: 100%;
    /* border: 1px solid; */
    background: url(https://demo.web3canvas.com/themeforest/tomato/img/bg3.png) no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 10px;
}
.special .first{
    width: 100%;
    /* border: 1px solid; */
    padding:13px;
}
.special .first h4{
    font-family: "raleway";
    font-size: 32px;
    color:white ;
    font-weight: bolder;
    text-align: center;
    margin: 40px 0px 10px 0px;
}
.special .first h5{
    font-family: "josefin sans";
    font-size: 20px;
    color:white;
    font-weight: lighter;
    text-align: center;
    margin: 0px 0px 10px 0px;
}
.special .first hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 0px auto;
}
.special #left{
    display: none;
}
.special #right{
    display: none;
}
.special .second {
    width: 100%;
    /* border: 1px solid; */
    border-radius: 5px 5px 5px 5px;
    background-color: white;
    padding: 22px 35px;
    margin: 0px 0px 40px 0px;
}
.special .second .img{
    display: none;
}
.special .text h4{
    font-family: "raleway";
    font-size: 24px;
    color:#4b4741;
    margin: 0px 0px 10px 0px;
}
.special .text h5{
    font-family: "josefin sans";
    font-size: 22px;
    color: #aaa;
    font-weight: lighter;
    line-height: 25px;
    margin: 0px 0px 10px 0px;
}
.special .text hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
}
.special .text p{
    font-family: "josefin sans";
    font-size: 18px;
    color: #828281;
    font-weight: lighter;
    line-height: 25px;
    margin: 0px 0px 10px 0px;
}
.special .text #i4{
    width: 100px;
    height: 34px;
    /* border: 1px solid; */
    font-family: "raleway";
    font-size: 10px;
    color:black;
    background-color: #f9c56a;
}
.special .text #i5{
    width: 100px;
    height: 34px;
    /* border: 1px solid; */
    font-family: "raleway";
    font-size: 10px;
    color:black;
}
.reservation {
    width: 100%;
    /* border: 1px solid; */
}
.reservation .first{
    width: 100%;
    /* border: 1px solid; */
    text-align: center;
}
.reservation h4{
    font-family: "raleway";
    font-size: 24px;
    color:#4b4741;
    font-weight: bolder;
    margin: 50px 0px 10px 0px;
}
.reservation h5{
    font-family: "josefin sans";
    font-size: 22px;
    color: #777;
    font-weight: lighter;
    margin: 0px 0px 10px 0px;
}
.reservation hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 0px auto;
}
.reservation .second{
    width: 100%;
    padding: 10px;
    /* border: 1px solid; */    
}
.reservation fieldset{
    width: 80%;
    margin: 0px auto;
    text-align: center;
}
.reservation form div{
    width: 100%;
    /* border: 1px solid; */
}
.reservation form div label {
    font-family: "josefin sans";
    font-size: 18px;
    color: #333333;
    margin: 0px 0px 0px 0px;
}
.reservation form div input{
    width: 80%;
    border: 1px solid #f3f1ed;
    padding: 7px 20px;
    background-color: #f3f1ed;
    margin: 10px 0px 30px 0px;
}
.reservation form div #bt3{
    width: 272px;
    height: 53px;
    border: 1px solid #f9c56a;
    color: black;
    background-color: #f9c56a;
    margin: 0px 0px 20px 0px;
}
.reservation .call{
    width: 100%;
    /* border: 1px solid; */
    background-color: #f1f0f0;
    text-align: center;
    padding: 10px;
    margin: 0px 0px 40px 0px;
}
.reservation .call p{
    font-family: "josefin sans";
    font-size: 22px;
    color: #828281;
    margin: 20px 0px 20px 0px;
}
.feature {
    width: 100%;
    /* border: 1px solid; */
    background: url(https://demo.web3canvas.com/themeforest/tomato/img/bg4.png) no-repeat;
    background-size: cover;
    padding: 10px;
}
.feature .first{
    width: 100%;
    /* border: 1px solid; */
    padding: 10px;
    text-align: center;
}
.feature .first h4{
    font-family: "raleway";
    font-size: 32px;
    color:white;
    font-weight: bolder;
    margin: 50px 0px 10px 0px;
}
.feature .first h5{
    font-family: "josefin sans";
    font-size: 20px;
    color: white;
    font-weight: lighter;
    margin: 0px 0px 15px 0px;
}
.feature .first hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 10px auto;
}
.feature .second{
    width: 100%;
    /* border: 1px solid; */
}
.second section{
    width: 100%;
    /* border: 1px solid; */
    background-color: white;
}
.second .s1,.s2,.s3{
    margin: 0px 0px 20px 0px;
}
.second section #i1{
    width: 100%;
    /* border: 1px solid; */
}
.second section #i1 img{
    width: 100%;
    padding: 10px 10px;
}
.second section #i2{
    width: 100%;
    /* border: 1px solid; */
    padding: 31px;
}
.second section #i2 h5{
    font-family: "raleway";
    font-size: 25px;
    color:#4b4741;;
    font-weight: bolder;
    margin: 0px 0px 10px 0px;
}
.second section #i2 hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 0px 0px 20px 0px;
}
.second section #i2 p{
    font-family: "josefin sans";
    font-size: 22px;
    color: #828281;
    font-weight: lighter;
    margin: 0px 0px 10px 0px;
    line-height: 25px;
}
.menu{
    width: 100%;
    text-align: center;
    /* border: 1px solid; */
}
.menu .first{
    width: 100%;
    /* border: 1px solid; */
    text-align: center;
    padding: 15px;
}
.menu .first h4{
    font-family: "raleway";
    font-size: 32px;
    color:#4b4741;
    font-weight: bolder;
    margin: 40px 0px 10px 0px;
}
.menu .first h5{
    font-family: "josefin sans";
    font-size: 20px;
    color: #777;
    font-weight: lighter;
    margin: 0px 0px 15px 0px;
}
.menu .first hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 0px auto;
}
.menu .second{
    width: 100%;
    /* border: 1px solid;   */
}
.menu .second h4{
    font-family: "raleway";
    font-size: 15px;
    color: #828281;
    display: inline-block;
    margin: 10px 0px 10px 23px;
}
.menu .second #i1{
    width: 27px;
    font-family: "raleway";
    font-size: 15px;
    color: #4b4741;
    border-bottom: 3px solid #f9c56a;
}
.menu .third{
    width: 100%;
    /* border: 1px solid;    */
}
.menu .third section{
    width: 100%;
    /* border: 1px solid;    */
}
.menu .third section article{
    width: 100%;
    /* border: 1px solid; */
    padding: 10px; 
}
.menu .third section article h5{
    font-family: "raleway";
    font-size: 18px;
    color: #4b4741;
    margin: 20px 0px 5px 0px;
}
.menu .third section article span{
    color:  #ccc;
}
.menu .third section article strong{
    font-family: "josefin sans";
    font-size: 22px;
    color: #333;;
    font-weight: bolder;
}
.menu .third section article small{
    font-family: "josefin sans";
    font-size: 18px;
    color: #828281;
}
.menu #bt4{
    width: 272px;
    height: 53px;
    border: 1px solid #f9c56a;
    color: black;
    font-family: "raleway";
    font-size: 18px;font-weight: bolder;
    background-color: #f9c56a;
}
.menu .trust{
    width: 100%;
    /* border: 1px solid; */
    text-align:center;
}
.menu .trust h4{
    font-family: "raleway";
    font-size: 32px;
    color:#4b4741;
    font-weight: bolder;
    margin: 50px 0px 10px 0px;
}
.menu .trust h5{
    font-family: "josefin sans";
    font-size: 20px;
    color: #777;
    font-weight: lighter;
    margin: 0px 0px 15px 0px;
}
.menu .trust hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 0px auto;
}
.menu .partner{
    width: 100%;
    /* border: 1px solid; */
}
.menu .partner #if, #io {
    width: 130px;
    height: 48px;
}
.menu .partner #it, #iz ,#iff{
    display: none;
}
.message {
    width: 100%;
    /* border: 1px solid; */
    background: url(https://demo.web3canvas.com/themeforest/tomato/img/bg5.png)no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
    padding: 15px;
}
.message .m1{
    width: 100%;
    /* border: 1px solid; */
}
.message .m1 i{
    color: white;
    font-size: 38px;
    margin: 30px 0px 30px 0px;
}
.message .m1 p{
    font-family: "josefin sans";
    font-size: 19px;
    color: #fff;
    line-height: 25px;
    margin: 0px 0px 20px 0px;
}
.message .m1 h4{
    font-family: "josefin sans";
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin: 0px 0px 30px 0px;
}
.message .dot{
    width: 100%;
    /* border: 1px solid; */
    margin: 0px 0px 30px 0px;
}
.message .dot i{
    font-size: 10px;
    color: grey;
}
.message .dot #i1{
    color: white;
}
.insub {
    width: 100%;
    /* border: 1px solid; */
}
.insub .insta{
    width: 100%;
    /* border: 1px solid; */
}
.insub .insta h4{
    font-family: "raleway";
    font-size: 32px;
    color: #4b4741;
    font-weight: bolder;
    text-align: center;
    margin: 65px 0px 10px 0px;
}
.insub .insta h5{
    font-family: "josefin sans";
    font-size: 20px;
    color: #777;
    font-weight: lighter;
    text-align: center;
    margin: 0px 0px 10px 0px;
}
.insub .insta hr{
    width: 113px;
    border: 2px solid;
    color: #f9c56a;
    margin: 0px auto;
}
.insub .subscribe{
    width: 100%;
    /* border: 1px solid; */
    background-color: #f7f3f4;
}
.insub .subscribe .subs{
    width: 100%;
    /* border: 1px solid; */
    padding: 16px;
}
.insub .subscribe .subs h3{
    font-family: "raleway";
    font-size: 45px;
    color: #4b4741;
    font-weight: lighter;
    text-align: center;
}
.insub .subscribe .subs h5{
    font-family: "josefin sans";
    font-size: 22px;
    color: #777;
    font-weight: lighter;
    text-align: center;
    margin: 0px 0px 10px 0px;
}
.insub .subscribe .mail{
    width: 100%;
    /* border: 1px solid; */
    padding: 10px;
}
.insub .subscribe .mail input{
        width: 178px;
        height: 46px;
        border: 1px solid #f9c56a;
        padding: 10px;
        margin: 0px 0px 20px 10px;  
}
.insub .subscribe .mail button{
    width: 60px;
    height: 46px;
    border: 1px solid #f9c56a;
    background-color: #f9c56a;
    padding: 5px; 
    font-size: 13px;
    margin: 0px 0px 0px 15px;
}
.about{
    width: 100%;
    /* border: 1px solid; */
    background: url(https://demo.web3canvas.com/themeforest/tomato/img/bg6.png)no-repeat;
    background-position: center center;
    background-size: cover;
}
.about  .first{
    width: 100%;
    /* border: 1px solid; */
}
.about  .first h5{
    font-family: "raleway";
    font-size: 18px;
    color: #f9c56a;
    font-weight: bold;
    margin: 0px 0px 25px 10px;
}
.about  .first p{
    font-family: "josefin sans";
    font-size: 18px;
    color: #fff;
    margin: 0px 32px 10px 10px;
    line-height: 25px;
}
.about  .first h6{
    font-family: "josefin sans";
    font-size: 14px;
    color: #f9c56a;
    margin: 0px 0px 20px 10px;
}
.about h5{
    font-family: "raleway";
    font-size: 18px;
    color: #f9c56a;
    font-weight: bold;
    margin: 40px 0px 25px 10px;
}
.about .food {
    width: 100%;
    /* border: 1px solid; */
}
.about .food article{
    width: 100%;
    /* border: 1px solid; */
    padding: 10px 10px;
}
.about .food article div{
    width: 80px;
    height: 71px;
    /* border: 1px solid; */
}
.about .food article h5{
    font-family: "josefin sans";
    font-size: 17px;
    color: #fff;
    font-weight: bold;
    float: right;
    margin: -70px 0px 10px 90px;
}
.about .food article span{
    font-family: "josefin sans";
    font-size: 14px;
    color: #828281;
    font-weight: bold;
}
.about .third{
    width: 100%;
    /* border: 1px solid; */
}
.about .third .sr{
    width: 100%;
    /* border: 1px solid; */
    padding: 10px;
}
.about .third .sr ul{
    width: 259px;
    height: 51px;
    /* border: 1px solid; */
    background-color: rgb(56, 56, 56);
}
.about .third .sr ul li{
   display: inline-block;
   color: white;
}
.about .third .sr ul li i{
    padding: 15px 9px;
}
.about #logs{
    color: #f9c56a;
    margin: 13px 0px 10px 10px;
}
.about span{
    font-family: "josefin sans";
    font-size: 17px;
    color: #bcbcbc;
    font-weight: bold;  
}
.footer{
    width: 100%;
    /* border: 1px solid; */
    padding: 25px 10px;
    background-color: #252525;
    text-align: center;
}
.footer h4{
    font-family: "josefin sans";
    font-size: 16px;
    color: #b5b5b4;
    font-weight: bold;
}
 @media only screen and (min-width:768px){

    .herosection{
        text-align: center;
    }
    
    .herosection .first .bt2{
        width: 35px;
        height: 58px;
        border: 2px solid rgba(121, 96, 35, 0.89);
        display: block;
        background: transparent;
        border-radius: 50px 50px 50px 50px;
        margin: 0px auto;
    }
    .herosection .first .bt2 i{
        font-size: 15px;
        color:  rgba(121, 96, 35, 0.89);
    }
    .history .s1 #if1 {
        display: none;
    }
    .history .s1{
        width: 100%;
    }
    .history .s1 #if2,.history .s1 #if3{
        width: 48%;
        display: inline-block;
        margin: 0px 5px 0px 5px;
    }
    .special .text #i4,.special .text #i5{
        width: 161px;
        height: 45px;
        font-size: 17px;  
        margin: 0px 0px 0px 5px;
    }
    .reservation .second{
        width: 60%;
        margin: 0px auto;
        padding: 10px 10px;  
    }
    .reservation .second form{
        text-align: center;
    }
    .reservation form div #bt3{
        margin: 20px  auto;
    }
    .reservation .call{
        width: 50%;
        margin: 10px  auto;
    }
    .feature .second section{
        width: 47%;
        display: inline-block;
    }
    .second .s1, .second .s2, .second .s3{
        margin: 0px 10px 20px 10px;
    }
    .menu .second{
        text-align: center;
    }
    .menu .second h4{
        margin: 10px 10px 10px 10px;
    }
    .menu .third{
        width: 100%;
        text-align: center;
    }
    .menu .third .t1 , .menu .third .t2{
        width: 47%;
        display: inline-block;   
    }
    .menu .third section article span::after{
        content: "...........";
    }
    .menu .partner #if, #io {
        width: 220px;
        height: 80px;
    }
    .menu .partner #it{
        width: 220px;
        height: 80px;
        display: inline-block;
        margin: 0px 0px 0px 10px;
    }
    .menu .partner #if, #io ,#it{
        margin: 0px 0px 0px 10px;
    }
    .message .m1{
        padding: 25px;
    }
    .message .m1 p{
        font-size: 31px;
        line-height: 43px;
    }
    .message .m1 h4{
        font-size: 26px;
    }
    .message .dot i{
        font-size: 20px;
    }
    .insub .subscribe .mail{
        text-align: center;
    }
    .about {
        padding: 10px 20px;
    }
    .about .food {
        width: 48%;
        display: inline-block;
        margin: 0px 20px 0px 0px;
    }
    .about .third{
        width: 48%;
        display: inline-block;
    }
} 
 @media only screen and (min-width:1024px){
        .herosection .header{
        height: 70px;
        width: 100%;
        padding: 10px 10px;
        border: 1px solid rgb(24, 24, 24);
        background-color: rgba(24, 24, 24, 0.6);
        position:fixed;
    }
    .header img{
    margin: 0px 0px 0px 30px;
    }
    .header nav i{
    display: none;  
    }
    .header nav {
        display: block;
        position: absolute;
        top: 18px;
        right: 20px;
    }
    .header nav a{
        text-decoration: none;
        display: inline-block;
        font-family: "raleway";
        font-size: 13px;
        font-weight: bold;
        color: white;
        margin: 0px 13px 0px 13px;
    }
    .herosection .first .resto img{
        width: 331px;
        height: 300px;
    }
    .herosection .first .resto img {
        display: block;
        margin: 0px auto;
    }
    .herosection .first h1{
        font-size: 70px;
        margin: 20px 0px 20px 0px;
    }
    .herosection .first h3{
        font-size: 36px;
        margin: 0px 0px 30px 0px;
    }
    .history .second{
        display: inline-block;
    }
    .history .second .s1 {
        width: 25%;
        display: inline-block;
        
    }
    .history .second .s2{
        width: 70%;
        display: inline-block;
    }
    .history .s1  #if1 , #if2, #if3{
        display: block;
    }
    .history .s1  #if1{
        width: 100%;
    }
    .history .s1 #if2, .history .s1 #if3{
        width: 45%;
        /* display: inline-block; */
    }
    .special #left{
        display: block;
    }
    .special #right{
        display: block;
    }
    .special .second {
        width: 85%;
        margin: 0px 0px 0px 70px;
    }
    .special .second .img{
        width: 45%;
        display: inline-block;
    }
    .special .text{
        width: 45%;
        display: inline-block;
        margin: 0px 0px 0px 35px;
    }
    .reservation .second{
        width: 55%; 
    }
    .reservation form div #bt3{
        margin: 0px 0px 20px 0px;
    }
    .reservation .call{
        width: 50%;
        margin: 0px 0px 40px 255px;
    }
    .feature .second section{
        width: 31%;
    }
    .menu .third .t1 , .menu .third .t2{
        width: 47%;
        display: inline-block;   
    }
    .menu .third section article span::after{
        content: "............................";
    }
    .menu .partner #if,
    #io ,#it, #it,
    #iz,
    #iff{
        width: 165px;
        height: 80px;
        display: inline-block;
    }
    .menu .partner #if,
    #io ,#it, #it,
    #iz,
    #iff{
        margin: 10px 0px 0px 15px;
    }
    .message .m1{
        padding: 74px;
    }
    .insub .subscribe .mail input{
            margin: 0px 0px 20px 0px;  
    }
    .about {
        width: 100%;
        padding: 20px 56px;
    }
    .about .first {
        width: 31%;
        display: inline-block;
    }
    .about .food {
        width: 31%;
        display: inline-block;
    }
    .about .third{
        width: 31%;
        display: inline-block;
    }
}
@media only screen and (min-width:1220px){
        .herosection .header{
        height: 70px;
        padding: 10px 10px;
        border: 1px solid rgb(24, 24, 24);
        background-color: rgba(24, 24, 24, 0.6);
        position:fixed;
    }
    .header img{
    margin: 0px 0px 0px 50px;
}
    .herosection .first .bt2{
        margin: 0px auto;
    }
    .history .second .s1 {
        width: 25%;
        display: inline-block;
    }
    .history .second .s2{
        width: 70%;
        display: inline-block;
    }
    .history .s1  #if1 , #if2, #if3{
        display: block;
    }
    .history .s1  #if1{
        width: 100%;
    }
    .history .s1 #if2, #if3{
        width: 46.50%;
        display: inline-block;
    }
    .special #left{
        display: block;
    }
    .special #right{
        display: block;
    }
    .special .second {
        width: 70%;
        margin: 0px 0px 0px 200px;
    }
    .special .second .img{
        width: 45%;
        display: inline-block;
    }
    .special .text{
        width: 45%;
        display: inline-block;
    }
    .reservation .second{
        width:40%; 
    }
    .reservation form div #bt3{
        margin: 0px 0px 20px 0px;
    }
    .reservation .call{
        width: 39%;
        margin: 0px auto;
    }
    .feature .second section{
        width: 31.70%;
    }
    .menu .second{
        margin: 10px 0px 20px 0px;
    }
    .menu .second h4{
        font-size: 18px;
    }
    .menu .second #i1{
        font-size: 18px;
    }
    .menu .third{
        width: 100%;
        margin: 0px 0px 0px 0px; 
    }
    .menu .third .t1 , .menu .third .t2{
        width: 47%;
        display: inline-block;   
    }
    .menu .third section article h5{
        font-size: 21px;
    }
    .menu .third section article strong{
        font-size: 24px;
    }
    .menu .third section article small{
        font-size: 20px;
    }
    .menu .third section article span::after{
        content: "...........................................................";
    }
    .menu .partner #if,
    #io , 
    #it,
    #iz,
    #iff{
        width: 220px;
        height: 80px;
        display: inline-block;
        margin: 10px 0px 0px 20px;
    }
    .message .m1{
        padding: 150px;
    }
    .insub .subscribe .mail input{
        width: 290px;
        height: 52px;
}
.insub .subscribe .mail button{
    width: 100px;
    height: 52px;
}
    .insub .subscribe .mail input{
            margin: 0px 0px 20px 0px;  
    }
    .about {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .about .first {
        width: 31%;
        display: inline-block;
        margin-top: 40px;
    }
    .about .food {
        width: 31%;
        display: inline-block;
    }
    .about .third{
        width: 31%;
        display: inline-block;
    }
}