*, ::after,::before{margin: 0; box-sizing: border-box;}
a{text-decoration: none;}
img{vertical-align: bottom;}
button{padding: 0; cursor: pointer;}
:disabled{cursor: not-allowed;}
ul{list-style: none; padding: 0;}

@font-face {
    font-family: 'TimesNewRoman';
    src: url(../fonts/Times\ New\ Roman.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face{
    font-family: 'pacifico';
    src: url(../fonts/pacifico.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face{
    font-family: 'MyriadPro-SemiExt';
    src: url(../fonts/MyriadPro-SemiExt.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face{
    font-family: 'MyriadPro-LightSemiExt';
    src: url(../fonts/MyriadPro-LightSemiExt.woff2);
    font-weight: 400;
    font-display: swap;
}

html{
    --ff:'TimesNewRoman';
    --pio:'pacifico';
    --myd:'MyriadPro-SemiExt';
    --mydl:'MyriadPro-LightSemiExt';
    --yellow: #e7a331;
    
}

body{
    
    background-color: #000;
    font: 400 18px var(--ff);
    bottom: 10px;
}

.container{
    max-width: 1200px;
    margin: auto;
    padding: 0 1rem;
}

.row{
    display: flex;
    flex-flow: row wrap;
    margin: 0 -1rem;
}

[class^="col-"]{ flex: 1 0 auto; padding: 0 1rem;}
.col-1{ flex-basis: 8.33%; max-width: 8.33%;}
.col-2{ flex-basis: 16.66%; max-width: 16.66%;}
.col-3{ flex-basis: 25%; max-width: 25%;}
.col-4{ flex-basis: 33.33%; max-width: 33.33%;}
.col-5{ flex-basis: 41.66%; max-width: 41.66%;}
.col-6{ flex-basis: 50%; max-width: 50%;}
.col-7{ flex-basis: 58.33%; max-width: 58.33%;}
.col-8{ flex-basis: 66.66%; max-width: 66.66%;}
.col-9{ flex-basis: 75%; max-width: 75%;}
.col-10{ flex-basis: 83.33%; max-width: 83.33%;}
.col-11{ flex-basis: 91.66%; max-width: 91.66%;}
.col-12{ flex-basis: 100%; max-width: 100%;}
.float-right{float: right;}
.flex{display: flex;}
.align-center{align-items: center;}
.align-cont-center{align-content: center;}
.text-center{text-align: center;}
.item-center{justify-items: center;}
.justify-center{justify-content: center;}
.justify-spec-bet{justify-content: space-between;}
.img-resp{max-width: 100%; height: auto;}
.food-order img{position: absolute;}
.btn{ background: var(--yellow); border: 1px solid var(--yellow); border-radius: 5px; font-size: 15px; font-family: var(--ff); padding: 17px 43px; color: #fff;}
.p1{font: 400 15px var(--ff); padding-right: 57px;}
h3{font:400 38px var(--ff)}

.index{z-index: 10;}
.gap-y-60{gap: 4rem 0;}

/*------------ CSS ------------*/
header{background-image: url(../img/banner.webp); background-repeat: no-repeat; background-position:center; background-size: cover; width: auto;  height: auto; padding-bottom: 50px;}
.food-order{background: #fff; position: relative; line-height: 30px;}
.food-order i{line-height: 30px; margin-right: 11px; font-size: 18px; color: var(--yellow); cursor: pointer;}
.food-order .fa-regular{margin-left: 57px;}
.food-order .fa-solid{margin-left: 35px;}
.food-order .social{margin-left: 7rem;}
.food-order p{font-family: "OpenSans",serif; font-size: 15px;}
.collapse{background-color: #0009;}
.nav-bar{justify-content: end; color: #fff; font:400 17px var(--myd); padding: 24px 0;}
.nav-bar .btn{background: none; border: 2px solid #fff; border-radius: 10px; color: var(--yellow); font-size: 17px;font-family: var(--myd); padding: 15px 26px;}
.nav-bar .btn:hover{background: var(--yellow); color: inherit; border-color: var(--yellow);}
.nav-bar li a{ color: inherit;  padding: 25px 15px; }
nav ul li{margin: 0 0 0 5px;}
nav ul li a:hover{color: var(--yellow);}
.nav-bar li a.active{color: #e7a331;}

/* .open-nav.open{transition: all .4s;} */

.hamburger{ display: none;}

.bar{height: 3px; width: 35px; background: #fff; margin: 5px 0; transition: all .3s;}

.hamburger--open .bar:nth-child(1){ transform: translateY(7px) rotate(45deg);}
.hamburger--open .bar:nth-child(2){ opacity: 0;}
.hamburger--open .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}


.foody{color: #fff;}
.foody h2{color: inherit; margin-top: 80px; margin-bottom: 24px; font: 400 10rem var(--pio); text-shadow: black -3px 6px 7px;}
.foody p{color: inherit; margin-bottom: 42px; font-size:25px; font-weight: 400; font-family:var(--ff);}
.foody .btn{ background: none; border: 2px solid #fff; border-radius: 10px; font-size: 20px; font-family: var(--ff); padding: 13px 38px; color: inherit; place-items: center;}
.foody .btn:hover{ border: 2px solid #fff; border-color:var(--yellow); background-color: var(--yellow); color: #000;}

.wrap-1{background-image: url(../img/wrap-1-bg.webp); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 100px 0;}
.wrap-1 .double-img{position: relative; }
.wrap-1 .img-1{position: relative; border: 10px solid #fff; box-shadow: 0px 0px 9px 2px #000; width: 400px; height: 355px;}
.wrap-1 .img-2{position: absolute; border: 10px solid #fff; box-shadow: 0px 0px 9px 2px #000; width: 400px; height: 355px;}
.wrap-1 .img-1{transform:rotate(-12deg); margin-left: 60px;}
.wrap-1 .img-2{margin-left:95px; left: 0;}
/* .wrap-1 img{} */
.wrap-1 .tasty{margin-left: 74px;}
.wrap-1 .aboutus{ font: 400 30px var(--pio);}
.wrap-1 h3{ font: 400 38px var(--ff); margin-bottom: 29px;}
.wrap-1 p{font: 400 15px var(--ff);}
.wrap-1 .btn{margin-left: 74px; margin-top: 40px; color: #000;}

.wrap-2{background-image: url(../img/wrap-2-bg.webp); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; padding: 100px 0;}
.wrap-2 .recipes{ background-image: url(../img/wrap-2-square.webp); width: 533px; height: 466px; background-repeat: no-repeat; background-size:cover; background-position:center; position: absolute;}
.wrap-2 .recipes{margin-top:46px;}
.recipes .left-margin{margin-left: 43px;}
.wrap-2 .special{font: 400 30px var(--pio); padding-top: 49px;}
.wrap-2 h3{margin-bottom: 37px;}
.wrap-2 .btn{margin-top: 35px; color: #000;}
/* .wrap-2 .col-7 img{} */

.wrap-3{background: url(../img/wrap-1-bg.webp); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 100px 0;}
.wrap-3 .delight{font: 400 30px var(--pio);}
.wrap-3 .images{margin-top: 67px;}
.image-1 img {width: 100%; height: 300px; object-fit: cover;}
.wrap-3 .image-1{position: relative;cursor: pointer; }
.wrap-3 .images .inner{background: #000c; width: 230px; height: 228px; top: 36px; right: 34px; position: absolute; display: none;}
.inner h4{font: 400 21px var(--ff); margin: 34px 0 20px 0; color: #fff;}
.wrap-3 .inner p{ font: 400 41px var(--ff); color: #fff;margin-bottom: 18px;}
.wrap-3 .inner .italian{ padding:9px 15px; font: 400 15px var(--ff);}
.wrap-3 .image-1:hover .inner{ display:block;}

.wrap-4{background: url(../img/wrap-4-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; padding: 100px 0;}
.wrap-4 .amazing{color: #fff; font: 400 30px var(--pio);}
.wrap-4 h3{color: #fff; margin-bottom: 57px;}
.wrap-4 .drink-text{background: #fff; width: 600px; height: 454px; margin-top: 43px; margin-left: -32px;}
.wrap-4 .menu p{font: 400 30px var(--pio); margin-left: 68px; margin-bottom: 30px; padding-top: 41px; }
.wrap-4 .prices{margin-bottom: 10px;}
.wrap-4 .prices img{ margin-left: 58px; margin-bottom: 0px; margin-right: 15px;}
.wrap-4 .prices p{font-size: 18px; margin: 0; padding: 0; font-family: var(--ff);}
.wrap-4 .main-text{ background: #fff; width: 600px; height: 454px; margin-top: 105px; position: absolute;}
.wrap-4 .main-img{margin-left: -100px; margin-top: 64px;}
.wrap-4 .dessert-text{background: #fff; width: 600px; height: 454px; margin-top: 104px; margin-left: -32px;}
.wrap-4 .dessert-img{margin-top: 64px;}

.wrap-5{background: url(../img/wrap-5-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 100px 0;}
.wrap-5 .food-mobile img{ margin: 0000;}
.wrap-5 .happy { color: #fff; margin-left: 73px;}
.wrap-5 .happy p{color: inherit; font: 400 30px var(--pio); margin-top: 137px;}
.wrap-5 .happy h3{font-size: 95px; font-family: var(--ff);}
.wrap-5 .happy span{font: 400 30px var(--ff);}
.wrap-5 .app {justify-content: center;}
.wrap-5 .app a{margin-top: 53px;}
.wrap-5 .app a:first-child{ margin-right: 30px;}


.wrap-6{background: url(../img/footer-bg.webp); background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; padding: 100px 0;}
.wrap-6 p{color: inherit; font: 400 30px var(--pio); margin-top: 64px; margin-bottom: 67px;}
.wrap-6 pre{font: 400 15px var(--ff); line-height: 25px;}
.wrap-6 .social i{ color: var(--yellow); margin-right: 15px;}
.wrap-6 .feed{ margin-bottom: 0;}
.wrap-6 form{margin-top: 21px;}
.wrap-6 form input{ width: 95%; padding: 19px 0 14px 23px; border-radius: 6px; background-color: #323232; color: #fff; border:none; outline: none; margin-bottom: 10px; font: 400 18px var(--ff);}
.wrap-6 form textarea{width: 95%; height: 109px; border-radius: 6px; background-color: #323232; color: #fff; font: 400 18px var(--ff); border: none; outline: none; padding: 15px 0 0 23px; resize: none;}
.wrap-6 .submit{padding: 18px 52px; margin-left: 10px; margin-top: 15px; color: #000;}

footer{line-height: 63px;}
footer p{color: #fff; font-size: 15px; font-family: var(--ff); font-weight: 400;}



/*---------------- Rsponsive For Tablets & Mobile ------------------*/

@media screen and (max-width:1220px){
    .col-6{ flex-basis: 50%; max-width: 50%;}
    .col-12{ flex-basis: 100%; max-width: 100%;}
    .food-order .index img{width: 296px; height: 170px;}
    .food-order .fa-regular {margin-left: 0px;}
    .food-order .fa-solid{margin-left: 29px;}
    .food-order .social{margin-left: 53px;}
    .food-order .fa-instagram { margin-right: 0px;}
    /* .collapse .nav-bar .btn {} */
    .foody h2{margin-top: 110px; font: 400 8rem var(--pio);}
    .foody p{margin-bottom: 35px;}
    .wrap-1 .img-2{margin-left: 42px; top: 0;}
    .wrap-1 .img-1{margin-left: 27px;}
    .wrap-2 .recipes{width: 475px; margin-left: 30px; }
    .wrap-2 .col-7 img{width: 632px; margin-left: -92px;}
    .wrap-3 .images .inner{width: 205px; height: 205px; top: 49px; right: 45px;}
    /* .wrap-3 .images .inner{width: 100%; height: 300px; object-fit: cover;} */
    .wrap-3 .inner h4{margin: 28px 0 13px 0;}
    .wrap-3 .inner p{margin-bottom: 12px;}
    .wrap-4 .drink-text {width: 530px;}
    .wrap-4 .drink-text, .wrap-4 .dessert-text{margin-left: -72px;}
    .wrap-4 .menu p {margin-left: 50px;}
    .wrap-4 .main-img{margin-left: -140px;}
    .wrap-4 .prices img {margin-right: 9px; margin-left: 25px;}
    .wrap-4 .prices p {font-size: 17px; margin: 0;}
    .wrap-4 .main-img img{width: 599px;}
    .wrap-4 .main-text {width: 530px;}
    .wrap-4 .dessert-text {width: 530px;}
    .wrap-5 .happy {margin-left: 0px;}
    .wrap-5 .happy h3 {font-size: 70px;}
    .wrap-5 .happy span {font: 400 22px var(--ff);}
    /* .wrap-5 .app img {margin-right: 26px;} */
    .wrap-6 p {font: 400 28px var(--pio);}
    

    

}

@media screen and (max-width:980px){
    .col-t-3{ flex-basis: 25%; max-width: 25%;}
    .col-t-5{ flex-basis: 41.66%; max-width: 41.66%;}
    .col-t-6{ flex-basis: 50%; max-width: 50%;}
    .col-t-12{ flex-basis: 100%; max-width: 100%;}
    .food-order .social { margin-left: -2px; font-size: 2px;}
    .food-order .index img {width: 222px; height: 140px;}
    .food-order .fa-regular { margin-left: 0;}
    .food-order .fa-solid { margin-left: 20px;}
    .food-order p { font-size: 11px;}
    .food-order i{ margin-right: 7px; font-size: 14px;}
    .foody h2{font: 400 5rem var(--pio); margin-top: 100px;}
    .foody p{font-size: 22px;}
    .o-p-0{order: -1;}
    nav ul li {margin: 0;}
    .nav-bar li a {padding: 25px 5px;}
    /* .nav-bar .btn {} */
    .nav-bar .btn {font-size: 16px; padding: 10px 10px;}
    .wrap-1 .img-2{left: 0;}
    .wrap-1 .double-img{margin: 100px 0 0 80px;}
    .wrap-1 .img-1, .wrap-1 .img-2{width: 450px; height: 405px;}
    .wrap-2{position :relative;}
    .wrap-2 .recipes{position: absolute; margin-top: 20px; margin-left: 0;}
    .wrap-2 .col-5{display: flex; justify-content: center;}
    .wrap-2 .col-7{display: flex; justify-content: center;}
    .wrap-2 .col-7 img {margin: 17em 0 0 0; width: 570px; height: 454px;}
    /* .image-1 img {width: 100%; height: 300px; object-fit: cover;} */
    .image-1 img {width: 100%; height: 350px; object-fit: cover;}
    .wrap-3 .images .inner{width:270px; height: 270px; top: 17px; right: 70px;}
    .wrap-3 .images .inner h4 {margin: 30px 0 30px 0;}
    .wrap-3 .images .inner p {margin-bottom:30px;}

    .wrap-4{position: relative;}
    .wrap-4 .col-6, .wrap-4 .col-6{display: flex; justify-content: center;}
    .wrap-4 .drink-text{margin: 6rem 0 0 0; position: absolute;}
    .wrap-4 .drink-img{margin-top: 25em;}
    .wrap-4 .main-text{margin: 6rem 0 0 0;}
    .wrap-4 .main-img{margin: 25em 0 0 0;}
    .wrap-4 .dessert-text{margin: 6rem 0 0 0; position: absolute;}
    .wrap-4 .dessert-img{margin: 25em 0 0 0;}
    .wrap-5 .col-4, .wrap-5 .col-7{display: flex; justify-content: center;}
    .wrap-5 .happy p{margin-top: 50px;}
    .wrap-5 .food-mobile{margin-top: 90px;}
    .wrap-6 .feed{text-align: center;}
    .sub{display: flex; justify-content: center}
    /* .wrap-6 .submit{;} */
    .wrap-6 form input {padding: 23px 0 23px 23px; margin-bottom: 18px; font: 400 20px var(--ff);}
    .wrap-6 .submit{font-size: 21px;}
    .wrap-6 .social i{font-size: 22px;}


    


}

@media screen and (max-width:767px){
    .col-m-6{ flex-basis: 50%; max-width: 50%;}
    .col-m-12{ flex-basis: 100%; max-width: 100%;}
    .o-p-0{order: -1;}
    .collapse{background-color: #0009; padding: 15px 0;}
    /* nav{display: none;} */
    .open-nav{display: none; position: absolute; top: 59px; background: #0009; right: 0; width: 100%; padding: 30px 0; z-index: 1;}
    .open-nav ul{ flex-direction: column; gap: 16px; margin-bottom: 20px;}
    .open{ display: block;}
    .nav-bar{padding: 0;}
    .hamburger{display: block; float: right;}
    .food-order .col-t-5, .food-order .col-t-3{display: none;}
    .food-order .index img {width: 150px; height: 90px;}
    /* .foody{transform: translateY(150px);} */
    .foody .btn{transform: translateY(0);}
    .foody h2 {font: 400 4rem var(--pio); margin: 0;}
    .foody p {font-size: 17px;}
    .wrap-1 .tasty {margin-left: 30px;}
    .wrap-1 .aboutus {font: 400 25px var(--pio);}
    .wrap-1 h3 {font: 400 30px var(--ff);}
    .wrap-1 .double-img {margin: 100px 0 0 30px;}
    .wrap-1 .img-1, .wrap-1 .img-2{width: 300px; height: 270px;}
    .wrap-1 .btn {padding: 10px 25px; margin-left: 30px;}
    .wrap-2{position: unset;}
    .wrap-2 .recipes{position:absolute;}
    .wrap-2 .recipes{width: 390px; height: 395px;}
    .wrap-2 .special {font: 400 20px var(--pio);}
    .wrap-2 h3 {font: 400 28px var(--ff);}
    .wrap-2 h3 {margin-bottom: 27px;}
    .wrap-2 .p1{font: 400 13px var(--ff);}
    .wrap-2 .btn {padding: 10px 25px; margin-bottom: 30px; margin-top: 25px;}
    .wrap-2 .col-7 img {margin: 14em 0 0 0; width: 435px; height: 344px;}
    .wrap-3 .delight {font: 400 20px var(--pio);}
    .wrap-3 h3{font: 400 28px var(--ff);}
    .wrap-3 .image-1 img{width: 100%; height: 280px;}
    .wrap-3 .images .inner {width: 200px; height: 200px; top: 25px; right: 60px;}
    .wrap-3 .images .inner h4 {margin: 15px 0; font-size: 18px;}
    .wrap-3 .images .inner p {margin-bottom: 15px;}
    .wrap-4 .amazing {color: #fff; font: 400 20px var(--pio);}
    .wrap-4 h3 {font: 400 28px var(--ff);}
    .wrap-4 .drink-text, .wrap-4 .main-text, .wrap-4 .dessert-text{width: 427px;}
    .wrap-4 .drink-img img, .wrap-4 .dessert-img img{width: 428px; height: 428px;}
    .wrap-4 .main-img img {width: 425px; height: 445px;}
    .wrap-4 .prices p {font-size: 13px;}
    .wrap-5 .happy .app{display: flex; flex-direction: column; gap: 30px; margin-top: 53px;}
    .wrap-5 .happy h3 {font-size: 55px;}
    .wrap-5 .happy span {font: 400 17px var(--ff);}
    .wrap-5 .app a{margin:0;}
    .wrap-5 .app a:first-child{margin-right:0;}
    .wrap-5 .app img{width: 200px; height: 74px;}
    .wrap-5 .app img{margin-bottom: 0px;}
    .wrap-5 .food-mobile {text-align: center;}

}

@media screen and (max-width:460px){
    .col-p-6{ flex-basis: 50%; max-width: 50%;}
    .col-p-12{ flex-basis: 100%; max-width: 100%;}
    header {width: 100%; height: 597px;}
    .foody {transform: translateY(60px);}
    .foody h2 {font: 400 3rem var(--pio); margin-top: 50px;}
    .foody p {font-size: 18px;}
    .wrap-1 .tasty {margin-left: 30px;}
    .wrap-1 .btn{margin-left: 30px;}
    .wrap-1 .aboutus {font: 400 20px var(--pio);}
    .wrap-1 h3 {font: 400 28px var(--ff); margin-bottom: 29px;}
    .wrap-1 .double-img{margin: 60px 0 0 0;}
    .wrap-1 .img-1, .wrap-1 .img-2{width: 250px; height: 250px;}
    .wrap-1 .img-2 {text-align: center;}
    .wrap-1 .img-1 {margin-left: 40px;}
    .wrap-2 .recipes {width: 355px;}
    .wrap-2 .special {font: 400 20px var(--pio); padding-top: 29px;}
    .wrap-2 .recipes .p1 {font-size: 12px;}
    .wrap-2 h3{font-size: 25px;}
    .wrap-2 .col-7 img{width: 100%; height: 454px; object-fit: cover;}
    /* .wrap-3 .image-1{text-align: center;}
    .wrap-3 .image-1 img{margin: 0;} */
    .image-1 img {width: 100%; height: 300px; object-fit: cover;}
    .wrap-4 .drink-img img, .wrap-4 .main-img img, .wrap-4 .dessert-img img{width: 100%; height: 370px; object-fit: cover;}
    .wrap-4 .drink-text, .wrap-4 .main-text, .wrap-4 .dessert-text {width: auto; height: auto;}
    .wrap-4 .menu{padding: 15px 15px 0 15px;}
    .wrap-4 .menu p {font: 400 25px var(--pio); margin-left: 35px; padding-top: 15px;}
    .wrap-4 .prices{margin-bottom: 25px;}
    .wrap-4 .prices img{margin-left: 10px; margin-right: 5px; width: 30px; height: 30px;}
    .wrap-4 .prices p {font-size: 12px; margin: 0; padding: 0; font-family: var(--ff);}
    .wrap-4 .drink-img, .wrap-4 .main-img, .wrap-4 .dessert-img {margin-top: 23em;}
    .wrap-5 .happy {margin-left: 0;}
    .wrap-5 .happy h3{font-size: 40px;}
    .wrap-5 .happy span{font-size: 14px;}
    .wrap-5 .happy .app{display: flex;}
    .wrap-5 .app a:first-child{margin-right: 0;}

    

}
 

@media screen and (max-width: 360px) {
    .wrap-2 .recipes {width: 325px;}
}