*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: Roboto;

}
.spann{
  color:rgb(207, 147, 105);
  font-size: 1.8rem;
  /* transform: translateY(30px); */
  padding-bottom: 20px;

}
/* .logo2{
    height:100%;
} */
.logo3{
  height:50px;
}
.pad{
  padding: 100px;

}
.app-title{
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 100;
    text-align: center;
    padding: 40px;
}
.app-logo{
    width: 50%;
    transform: translate(50%);
    padding-bottom: 40px;
}
.mea-culpa-regular {
    font-family: "Mea Culpa", cursive;
    font-weight: 400;
    font-style: normal;
  }
  .container.promo{
    height: 100vh;
  }


.carousel-item img{
  width:700px;
  height:350px;

}
.tag1{
    color:white;

    font-family: Roboto;
    font-size: 4rem;
}
.tag2{
  color:white;

  font-family: Roboto;
  font-size: 2rem;

}

.tag3{
   color:white; text-align: center;
    font-family: Roboto;
    font-size: 2rem;
}
.tag4{
   color:white;

    font-family: Roboto;
    font-size: 3rem;
}

.container{
    margin: 0 auto;
    max-width: 800px;
}
body{
    background: rgb(79,57,44);
}
.adv .offer{
    font-size: 20px;
}

element.style {
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 200px;
    left: 65%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}
@media (min-width: 768px) {
    .d-md-block {
        display: block !important;
    }
}


.button {
    border: none;
    font-size: 16px;
    background: rgb(79,57,44);
    background: linear-gradient(4deg, rgba(79,57,44,1) 20%, rgba(176,151,137,0.5886729691876751) 100%);
    color:rgb(245, 234, 234);
    padding: 10px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
  }

  .button1 {
    background-color: rgb(240, 154, 61);
    border: 2px solid white;
    border-radius: 25px;
  }
#formGroupExampleInput{
    background-color: rgb(184, 152, 102); /* Green */;
    display: flex;
    color: red;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-items: center;


    max-width:175px;
    background-color: rgb(255, 255, 255);
    color:rgb(172, 0, 0);
}
.form-label{
     color:rgb(184, 152, 102);
    font-size: 18px;
}
.form-control{
    background-color: #c89a73;
    color: #c89a73;
    border: solid 2px  #c89a73;
}
.inputed{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.testa-container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width:800px;
    height:100px;
    background-color: black;
}

.post-container{
    margin-top: 15px;
}
.post-container .post{
    width:250px;
    border: solid  #c89a73;
    background-color:#3b2316;
    box-shadow: 0px 0px 0px rgb(200, 153, 55);
    margin:0 auto;padding-bottom: 20px;
}
.post-container .post .image img{
    width:100%;
    height:200px;
    object-fit: cover;
   }

   .post-container .post .content{
    padding: 0 20px;
   }

   .post-container .post .content .title{
    font-weight:600;
    font-size: 22px;
    color:rgb(240, 236, 228);
    text-transform: capitalize;
   }

   .post-container .post:hover .title{
    text-decoration: underline;
   }
   .post-container .post .content p{
    font-size: 14px;
    color:rgb(184, 152, 102);
    padding:5px 0;
   }

   .post-container .post .content .link{
    display: block;
    color:tomato;
    margin-top:10px;
   }
   .post-container .post .content .link:hover{

    color:#333;

   }

   .formGroupExampleInput{
       max-width: 50px;
   }
   .form-btn{
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .only{
       position: relative;
     text-align: center;
     top: 200px;
       color: rgb(255, 255, 255);
       font-size: 24px;

   }
   .whats-good{
       color: white;
       font-size: 10px;
       position: relative;
       top:13px;
       left:-82px;
   }
     .whats-good2{
         text-align: center;
       color: rgb(255, 255, 255);
       font-size: 2rem;
       position: relative;
       top:80px;

   }
   .phoned img{
    height: 100%;
    width: 250px;
    transform: translateX(110%);
   }
   .rest{
       margin-top: 30px;
       color:#c89a73;
       text-align: center;
       font-size: 24px;
   }
   .testa{
    text-align: center;
    font-size: 24px;
    color:rgb(207, 137, 87);

}
.promotions{
    color: white;
    text-align: center;
    font-size: 2rem;
    padding: 50px;
    font-weight: 100;
}
.container.promo{
    height: 800px;padding-top: 100px;
}

.giants{
  background-image: url('couple5.jpg');
    background-color: rgb(0, 0, 0,0.4);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 400px;
    width: 100%;margin-top: 20px;
}

.giants2{
background-image: url('/couple.jpg');
  background-color: rgb(0, 0, 0,0.4);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;margin-top: 20px;
}
.giants3{
background-image: url('/giant2.jpg');
  background-color: rgb(0, 0, 0,0.4);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;margin-top: 20px;
}

.giants4{
background-image: url('/couple5.jpg');
  background-color: rgb(0, 0, 0,0.4);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 100%;margin-top: 20px;
}
 .row{
  display: flex;
  align-items: center;
  height: 100%;
padding-top:5px;
padding-bottom: 10px;
 }
 .left{
  display: flex;
   width: 100%;
   height: 300px;
   padding: 25px;

 }
 .left img{
 border-radius: 10%;
 }
 .right{
   display: flex;
   width: 100%;
   height: 400px;
   color: aliceblue;
   font-size: 1.2rem;
   align-items: center;
font-weight: 100;
   flex-direction: column;
justify-content: start;
padding-top: 100px;
line-height: 25px;
 }
.getphone{
  height: 300px;
  width: 1200px;
  background-color:  #c89a73;
}

.logo{
    width:40px;
    height:40px;
    transform: translateY(5px);

}

.logo2{
    width:40px;
    height:40px;
    transform: translateY(10px);

}
.logo4{
  width:40px;
  height:40px;
  transform: translateY(-10px);

}

span{
    color:rgb(216, 168, 134);
    font-size: 32px;
}
nav{
    display:flex;
    align-items: center;
    justify-content: space-around;
    height:11vh;
    background: rgb(79,57,44);
    color:rgb(216, 168, 134);
}


.nav-links{
   display: flex;
   align-items: center;
   justify-content: space-around;
   width:50%;
   list-style: none;
   color:rgb(216, 168, 134);
   transform: translateY(10px);
   letter-spacing: 1px;
}

.nav-links li a{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width:100%;
    list-style: none;
    color:rgb(216, 168, 134);
    text-decoration: none;
    font-size: 16px;
    font-weight: 100;
 }
 .nav-links li::after{
    content:'';

 width: 0%;
 height:2px;
 background-color: #ffffff;
 display: block;
 margin: auto;
 transition: 0.5s;
  }

  .nav-links li:hover::after{
    content:'';
 width: 100%;
 height:2px;
 background-color: coral;
 display: block;
 margin: auto;
  }

.showcaseFine{
    background-image: url("/o.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgb(241, 239, 237);
    background-blend-mode: darken;
   max-width:100%;
    height:45vh;

    background-blend-mode:multiply;
}

.youtube{
    margin: 0 auto;
    text-align: center;
}


.burger > div{
    background-color: rgb(216, 168, 134);
    width:25px;
    height:2px;
    margin-bottom: 5px;
    margin-right: 20px;
    display:none;transition: all 0.3s ease;

}
 img{


        max-width:100%;
    }

    .fine-dining{
        color:rgb(207, 147, 105);
        font-size: 24px;
        text-align: center;
        margin-top: 20px;
    }
    .carousel-item{
        /* height: 100vh; */
        max-width:100vw;

        background-color: black;
    }
    .showcase{
        background-image: url("/sax.jpg");

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgb(128, 128, 128);
        background-blend-mode: multiply;
        width:100%;
        height: 35vh;

        background-blend-mode: darken;
    }
    .showcaseNite{
        background-image: url("dance.jpg");
        overflow-x: hidden;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: rgba(230, 230, 230, 0.9);
        background-blend-mode: multiply;
        width:100%;
        height: 35vh;

        background-blend-mode: darken;
    }
    .showcaseFine{
        background-image: url("o.png");
        overflow: hidden;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        /* background-color: rgb(241, 239, 237);
        background-blend-mode: darken; */
        width:100%;
        height: 35vh;

        background-blend-mode: darken;
    }




    /* .footer{
        display:flex;
        align-items: center;
        justify-content: center;
        width:100%;
        height:300px;
       background-color:#3b2316;
        color:  #c89a73;
        list-style: none;


    }

     .footer-notes{
        display:flex;
        align-items: center;
        justify-content: center;
        list-style: none;
    }
    .footer-items{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width:700px;
        list-style: none;
        height: 100%;
    } */
    .tag-line{
        display: flex;
       align-items: center;
       justify-content: center;
        font-size: 24px;
        color:rgb(255, 255, 255);
        margin-bottom: 10px;

    }
    .search-btn{
        position: relative;
        top:25%;
        left:30%;
        font-size: 16px;
        background-color:rgb(184, 106, 23);
        color:white;
        border-radius: 25%;
    }
    .rest-list{
        list-style: none;
        color: #c89a73;
    }


    .couple{
        background-color: rgb(78, 53, 53);
        background-blend-mode: darken;
  }
  .tag-line{
    position: relative;
    display: flex;
    align-items: center;
    justify-self: left;
    top: 50px;
    font-size: 2rem;
    color:rgb(0, 0, 0);
    margin-bottom: 30px;
    left:350px
}
.grid-container {
    display: grid;

    grid-template-areas: 'myArea myArea2'
    'myArea3 myArea6';
  }

.item1 {
    grid-area: myArea;margin-top: 75px;
    font-size: 20px;
    color: beige;
  }
  .item2 {
    grid-area: myArea2;
    margin-top: 50px;
  }
  .item3 {
    grid-area: myArea3;
    font-size: 20px;
    color: beige;
    margin-top: 40px;
    padding-bottom: 35px;
  }
  .item6 {
    grid-area: myArea6;
    margin-top: 50px;
    margin-left: 0px;
  }


/* //////////////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////////////// */







@media screen and (max-width:750px){
    body{
        overflow-x:hidden;
    }
    .adv .offer{
        font-size: 13px;
    }
      .offer{
        grid-area: myArea;margin-top: 45px;
        font-size:1px;
        color: beige;
      }
      .tag1{
        color:white;

        font-family: Roboto;
        font-size: 1.5rem;
    }
    .tag2{
      color:white;

      font-family: Roboto;
      font-size: 1.5rem;
  }

.tag3{
       color:white;

        font-family: Roboto;
        font-size: 1.5rem;
  }

    .tag4{
       color:white;

        font-family: Roboto;
        font-size: 1.5rem;
  }
  .carousel-item img{
    width:800px;
    height:250px;

  }

  .whats-good{
    color: white;
    font-size: 10px;
    position: relative;
    top:13px;
    left:-72px;
}
  .whats-good2{
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 2rem;
    position: relative;
    top:80px;

}
    .finelink{
        position: relative;
       top: 100px;
     }
     .only{
        position: relative;
        text-align: center;
        top: 150px;
          color: rgb(255, 255, 255);
          font-size: 18px;

    }
     .wrapper{
         height:100vh;
     }
     .grid-container {
        display: grid;

        grid-template-areas: 'myArea myArea2'
        'myArea3 myArea6';
      }

      .item1 {
        grid-area: myArea;margin-top: 55px;
        line-height: 1.5rem;
        font-size: 12px;
        color: beige;
      }
      .item2 {
        grid-area: myArea2;
        margin-top: 70px;
      }
      .item3 {
        grid-area: myArea3;
        font-size: 12px;
        line-height: 1.5rem;
        color: beige;
        margin-top: 65px;
        padding-bottom: 35px;
      }
      .item4 {
        grid-area: myArea4;
        margin-top: 45px;
        font-size: 13px;
        color: beige;
      }
      .item5 {
        grid-area: myArea5;
        font-size: 13px;
        color: beige;
       }
       .item6 {
        grid-area: myArea6;
        margin-top: 68px;
      }

      span{
        color:rgb(216, 168, 134);
        font-size: 18px;
    }


    /* .search-btn{
        position: relative;
        top:25%;
        left:30%;
        font-size: 16px;
        background-color:rgb(20, 12, 7);
        color:white;
        border-radius: 25%;
    } */
    .item{
        box-shadow:inset 0 0 0 2000px rgba(244, 122, 15, 0.3);width:100%;
    }
    .tag-line{

        /* display: flex;
        align-items: center;
        justify-self: center; */
        top: 100px;
        font-size: 24px;
        color:rgb(255, 255, 255);
        margin-bottom: 10px;
    }
    .button {
        border: none;
        font-size: 16px;
        background: rgb(79,57,44);
        background: linear-gradient(4deg, rgba(79,57,44,1) 20%, rgba(176,151,137,0.5886729691876751) 100%);
        color:rgb(245, 234, 234);
        padding: 10px 18px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
      }

      .button1 {
        background-color: rgb(240, 154, 61);
        border: 2px solid white;
        border-radius: 25px;
      }
      .rest{
          padding-top: 10px;
      }

      .button1:hover {
        background-color: white;
        color: rgb(207, 137, 87);
        border: 2px solid rgb(207, 137, 87);
      }

      .form-btn{


        background: rgb(79,57,44);
        background: linear-gradient(4deg, rgba(79,57,44,1) 20%, rgba(176,151,137,0.5886729691876751) 100%);
        color:rgb(245, 234, 234);
        padding: 10px 18px;
        background-color: #c89a73; /* Green */
        border: solid 1px white;
        border-radius: 25px;
        position: relative;

        color:white;
        padding: 5px 12px;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        margin-top: 10px;
        transition-duration: 0.4s;
        cursor: pointer;
      }



    .nav-links{

        position:absolute;
       flex-direction: column;
       top:10vh;
        right:0px;
        height:100vh;
        background: rgb(79,57,44);
        color:rgb(207, 147, 105);
        width:50%;
        transform:translateX(100%);
        transition:transform 0.5s ease-in;
        z-index: 6000;
    }
    .nav-links li{
        opacity:0;
    }
    .nav-links li a{
        border-bottom: solid rgb(207, 147, 105) 1px;
    }
    .burger > div{
        display: block;
        cursor: pointer;
    }

}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

.nav-active{
    transform:translateX(10%);
    opacity:1;
}


@keyframes navLinkFade{
    from{
        opacity:0;
        transform:translateX(50px);
    }
    to{
        opacity:1;
        transform:translateX(0px);
    }
}





.toggle .line1{
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
    opacity:0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px, -5px);
}

.search {
  display:flex;
  align-items: center;
  justify-items: center;

}

.example{
  display: flex;
  align-items: center;
  justify-content: center;
}

    .example input[type=text] {

        border-radius: 25px;
        border: solid 1px #c89a73;;
        position: relative;
        top:25%;

        font-size: 16px;
        background: rgb(79,57,44);
        background: linear-gradient(4deg, rgba(79,57,44,1) 20%, rgba(176,151,137,0.5886729691876751) 100%);
        color:rgb(245, 234, 234);
        padding: 10px 18px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
       }
       .rest-search{
        color:#c89a73;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;

       }

       .tag-line{
       /*  position: relative;
        display: flex;
        align-items: center;
        justify-self: left;
        top: 100px; */
        font-size: 2rem;
        color:rgb(255, 255, 255);

        margin-bottom: 10px;
        text-align: center;
    }
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #c89a73;
        opacity: 1; /* Firefox */
      }

      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #c89a73;
      }
      .couple{
            background-color: rgb(28, 27, 25);
            background-blend-mode: darken;
            background-size: cover;
            height:200px;
      }




      .phones{
          width:175px;
      }
      .left-phone{
        width: 600px;height: 100%;
      }
      .left-phone img{
        width: 400px;
        height: 300px;
        padding: 20px;
        border-radius: 10%;
      }

     .foot{
        display:flex;
        align-items: center;
        justify-content: center;
        width:100%;
     padding: 20px 0;
       background-color:#3b2316;
        color:  rgb(216, 168, 134);
        list-style: none;
        font-size: 14px;


    }

     .footer-notes{
        display:flex;
        align-items: center;
        justify-content: center;
        list-style: none;
    }
    .footer-items{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width:900px;
        list-style: none;
        padding: 5px;
    }
    .footer-items li{
      padding: 2px;}

    .parallax {
        /* The image used */
       background-image: url("/bmp.jpg");

        /* Set a specific height */
        min-height: 250px;
position: relative;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .parallax2 {
        /* The image used */
       background-image: url("./dance2.jpg");

        /* Set a specific height */
        min-height: 250px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .parallax3 {
        /* The image used */
       background-image: url("./smoking.webp");

        /* Set a specific height */
        min-height: 250px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .adv{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
      }
      .offer{
        grid-area: myArea;margin-top: 45px;
        font-size: 13px;
        color: beige;
      }
      .map{
          width:250px;
          margin-top: 25px;
          margin-bottom: 25px;
      }
      .adv-email{
        font-size: 20px;
        color: beige;
      }
      .adv-email2{
        font-size: 16px;
        color: beige;
      }
      .adv-email3{
        font-size: 16px;
        color: beige;
      }
      .topbtn{
          display: flex;
          align-items: center;
          position: relative;
          left:47%;
          bottom: -30px;
      }
      .tag-line{


        transform: translateX(250px);
        font-size: 2rem;
        color:rgb(255, 248, 248);

    }
    .finelink{
        position: relative;
        top: 100px;
        text-align: center;
    }

    .carousel .slide{
        text-align: center;
        background-color: black;    }

        .giant6{
          background-image: url('/couple.jpg');
            background-color: rgb(0, 0, 0,0.4);
            background-blend-mode: multiply;
            background-size: cover;
            background-position:center;
            background-repeat: no-repeat;
            height: 350px;
            width: 100%;
            margin-top: 20px;
      }
      .only2{
        position: relative;
      text-align: center;
      top: 70px;
        color: rgb(255, 255, 255);
        font-size: 2rem;

    }