@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      font-size: 62.5%;
    }
    
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: rgba(235, 235, 255, 1)
    }
    
    /*---------Header background-----------*/
    
    .header {
      background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url('img/header2.jpeg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      filter: contrast(105%);
      height: 100vh;
      position: relative;
    }

    /*---------Navigation menu-----------*/

    .nav {
      color: white;
      padding: 0.2em 0.5em;
    }

    .navbox {
      margin-top: 2em;
    }

    .logo {
      color: crimson;
      letter-spacing: 0.2rem;
      text-transform: uppercase;
      float: left;
      margin-left: 0.5em;
      padding: 0.2em 0.1em 0.2em 0.1em;
      font-weight: 500;
    }

    ul {
      float: right;
      list-style: none;
      margin-right: 4em;
    }

    ul li {
      display: inline-block;
      margin: 0 0.8em;
    }

    ul li a {
      display: inline-block;
      text-decoration: none;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.2rem;
      padding: 0.5em 0.4em;
      font-weight: 400;
      font-size: 1.5rem;
    }

    .nav::after {
      content: '';
      display: block;
      clear: both;
    }

    ul li a:hover {
      color: deepskyblue;
      transform: scale(1.1);
      border-bottom: 0.1em solid crimson;
    }

    /*---------Header content-----------*/

    .headerContent {
      text-align: center;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      padding: 2em;
    }

    .headerHeading {
      color: crimson;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5rem;
      margin: 1em;
      font-size: 1.3rem;
      font-family: 'Montserrat', sans-serif;
    }

    .headerPara {
      color: whitesmoke;
      letter-spacing: 0.08rem;

    }

    .headerContent a {
      padding: 0.5em 2em;
      margin-top: 2em;
      letter-spacing: 0.2rem;
    }

    /*---------Memory section-----------*/
    
    .memoryBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80em;
      margin: 10em auto;
      width: 90%;
    }

    .Imgbox {
      float: left;
      width: 50%;
      height: 100%;
    }

    .Imgbox img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .Textbox {
      float: right;
      width: 50%;
      height: 100%;
      padding: 2em;
      margin-top: 60%;
    }

    .Textbox h2 {
      margin-bottom: 1em;
      letter-spacing: 0.2rem;
      font-size: 4rem;
    }

    .Textbox p {
      font-size: 1.6rem;
    }

    .Textbox a {
      margin-top: 1.5em;
    }

    .memoryBox::after {
      content: '';
      display: block;
      clear: both;
    }

    /*---------Popular Dishes-----------*/
    
    .dishbox {
      margin: 10em auto;
      padding: 5em;
      width: 85%;
    }

    .dishheading {
      text-align: center;
      color: crimson;
      letter-spacing: 0.3rem;
      margin-bottom: 3em;
      text-transform: uppercase;
      font-size: 500;
    }

    .box1 {
      float: left;
      width: 45%;
      height: 400px;
      margin-bottom: 3em;
    }

    .dishimg img {
      width: 100%;
      height: 50%;
    }

    .dishtext {
      padding: 2em;
      height: 50%;
      width: 100%;
    }

    .dishtext h2 {
      margin-bottom: 0.5em;

    }

    .dishspanname {
      float: left;
    }

    .dishspanprice {
      float: right;
      color: crimson;
    }

    .dishtextlabel::after {
      content: '';
      display: block;
      clear: both;
    }


    .dishtext p {
      text-align: left;
    }

    .box2 {
      float: right;
      width: 45%;
      height: 400px;
      margin-bottom: 3em;
    }

    .dishboxes::after {
      content: '';
      display: block;
      clear: both;
    }

    .more-dishlink {
      margin-top: 4em;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .more-dishlink a {
      padding: 0.5em 1.5em;

    }

    /*-------------Feature section-----------*/

    .featureboxes {
      padding: 5em 5em 9em 5em;
      margin: 15em 0 10em 0;
    }

    .featureheading {
      color: crimson;
      letter-spacing: 0.5rem;
      margin: 1em 0 3em 0;
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
    }

    .row {
      height: 45em;
      width: 100%;

    }

    .row1 .featureImg,
    .row3 .featureImg,
    .row2 .featureText {
      float: left;
      width: 50%;
    }

    .row2 .featureImg,
    .row1 .featureText,
    .row3 .featureText {
      float: right;
      width: 50%;
    }

    .row1,
    .row2 {
      margin-bottom: 9em;
    }

    .featureImg {
      height: 100%;
    }

    .featureImg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .featureText {
      padding: 5em 2em;
      position: relative;
    }
    
    .featureText h2 {
      text-align: center;
      margin-bottom: 1em;
      letter-spacing: 0.1rem;
    }


    .row::after {
      content: '';
      display: block;
      clear: both;
    }

    /*---------Booking section-----------*/

    .bookingbox {
      padding: 5em;
      text-align: center;
    }

    .bookingbox h2 {
      margin-bottom: 1em;
      letter-spacing: 0.1rem;
      color: crimson;
      font-weight: 500;
      text-transform: uppercase;
    }

    .bookingbox a {
      margin-top: 1em;
      padding: 0.3em 1em;
      letter-spacing: 0.2rem;
    }

    /*---------------Footer----------------*/

    .footer {
      background-color: #101014;
      margin-top: 10em;
      padding: 3em 0;
      color: rgba(235, 235, 255, 1);
    }

    .social {
      text-align: center;

    }

    .social i {
      margin: 0 0.5em 0.5em 0.5em;
    }
    
    .footer p {
      text-align: center;
    }
    .pranav {
      color: deepskyblue;
      text-decoration: none; 
    }

    .footerbox {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 3em;
    }
    .footb {
      height: 100px;
      text-align: center;
      width: 30%;
      margin: 1em;
    }
    .footerbox h4 {
      margin-bottom: 0.5em;
      letter-spacing: 0.05rem;
      color: crimson;
      font-weight: 500;
      font-size: 1.6rem;
      text-transform: uppercase;
    }

    /*----------Menu Navigation------------*/
    
    .navigation {
      background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.5)),url('img/menu3.jpeg');
      height: 60em;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
      position: relative;
    }
    .menuHeading {
      width: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    .menuHeading h2 {
      color: white;
      font-size: 7rem;
      font-weight: 500;
      letter-spacing: 0.5rem;
      text-transform: uppercase;
      text-shadow: 2px 2px 2px black;
      
    }
    .menuorder {
      background-color: rgba(16, 210, 55, 0.8);
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 1.5em;
      text-align: center;
    }
    .menuorder p {
      font-size: 1.5rem;
      display: inline-block;
      font-weight: 500;
      letter-spacing: 0.15rem;
      text-transform: uppercase;
      text-align: center;
    }
    .menuorder a {
      background: transparent;
      margin-left: 3em;
      font-size: 1.5rem;
    }
    
    /*--------------menu dishes----------------*/
    
    .bowl-section .box1, .bowl-section .box2 {
      margin-bottom: 5em;
    }
    .drink-section img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .drink-section .dishimg {
      height: 65%;
      width: 100%;
    }
    .drink-section .dishtext {
      height: 30%;
    }
    .drink-section .box1, .drink-section .box2 {
      height: 320px;
    }
    .menubooking {
      margin-bottom: 5em;
    }
    
    
    /*--------------About----------------*/
    .about {
      background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2)),url('img/about1.jpeg');
      height: 60em;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
      position: relative;
    }
    .aboutboxes {
      margin: 10em auto;
    }
  
    .aboutbox {
      height: 72em;
      position: relative;
    }
    .aboutbox2 {
      margin: 5em auto;
    }
    .aboutimgbox {
      width: 50%;
      height: 100%;
    }
    .aboutimgbox img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .abouttextbox {
      width: 50%;
      padding: 2em;
    }
    .abouttextbox h2 {
      font-size: 3rem;
      text-align: center;
      margin-bottom: 0.5em;
    }
    .abouttextbox p {
      font-size: 1.7rem;
      letter-spacing: 0.1rem;
    }
    .abouttextbox1 {
      position: absolute;
      top: 50%;
      transform: translate(-0%, -50%);
      right: 0;
    }
    .aboutimgbox1, .abouttextbox2 {
      float: left;
    }
    .abouttextbox1, .aboutimgbox2 {
      float: right;
    }
    .aboutbox::after {
      content: '';
      display: block;
      clear: both;
    }
    
    
    /*--------------Review-----------------*/
    
    .review {
      background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2)),url('img/review1.jpeg');
      height: 60em;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
      position: relative;
    }
    .review-section .memoryBox {
      height: 120em;
    }
    .review-section h2 {
      margin-top: 4em;
    }
    .reviewpara {
      margin: 8em 0;
    }
    .reviewpara i {
      font-weight: 500;
    }
    
    /*----------contact page------------*/
    
    .contact-nav {
      background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.6)),url('img/contact1.jpeg');
      height: 60em;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
      position: relative;
    }
    .maincontainer {
      width: 85%;
      margin: 0 auto;
    }
    .formcontainer {
      margin: 10em auto;
      height: 60em;
    }
    .formbox {
      width: 50%;
      height: 70em;
      float: left;
    }
    form {
      padding: 5em 3em;
      margin: 5em 3em;
    }
    .contactimgcontainer {
      float: right;
      width: 50%;
      height: 100%;
    }
    .contactimgcontainer img {
      width: 100%;
      height: 100%;
    }
    .formcontainer::after {
      content: '';
      display: block;
      clear: both;
    }
    label {
      font-size: 1.5rem;
      letter-spacing: 0.2rem;
      margin-bottom: 0.2em;
      font-weight: 800;
      color: crimson;
      font-variant: small-caps;
      margin-bottom: 0.4em;
    }
    input[type="text"] {
      display: block;
      width: 100%;
      height: 2.5em;
      background: rgba(235, 235, 255, 1);
      border: none;
      box-shadow: inset 0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.3), inset -0.3rem -0.3rem 0.5rem rgba(255, 255, 255, 1);
      border-radius: 1em;
      padding: 0.5em 1em;
    }
    
    textarea {
      display: block;
      width: 100%;
      background: rgba(235, 235, 255, 1);
      border: none;
      box-shadow: inset 0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.3), inset -0.3rem -0.3rem 0.5rem rgba(255, 255, 255, 1);
      border-radius: 1em;
      padding: 1em;
    }
    
    input[type="submit"] {
      box-shadow: 0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.3),-0.3rem -0.3rem 0.5rem rgba(255, 255, 255, 1);
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.6rem;
      padding: 1em 2em;
      font-variant: uppercase;
      background-color: rgba(235, 235, 255, 1);
      border: none;
      font-variant: small-caps;
      border-radius: 2em;
      color: dodgerblue;
    }
    
    input[type="submit"]:hover {
      transform: scale(1.1);
      background: rgba(0,0,0,0.9);
    }
    
    
    /*------------------------------------*/

    p {
      font-size: 1.5rem;
      letter-spacing: 0.1rem;
    }

    h2,
    h3,
    h4 {
      font-size: 2rem;
    }

    /*---------Utility classes-----------*/

    .container {
      width: 85%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .lgHeading {
      font-size: 3.5rem;
    }

    .mdHeading {
      font-size: 2.5rem;
    }

    .boxshadow {
      box-shadow: 1.1rem 1.1rem 2rem rgba(0, 0, 0, 0.3), -1.1rem -1.1rem 2rem rgba(255, 255, 255, 1);
    }

    .boxshadow2 {
      box-shadow: inset 1.1rem 1.1rem 2rem rgba(0, 0, 0, 0.3), inset -1.1rem -1.1rem 2rem rgba(255, 255, 255, 1);
    }

    .primarybtn {
      display: inline-block;
      text-decoration: none;
      font-weight: 500;
      color: crimson;
      border-radius: 2em;
      background: rgba(235, 235, 255, 0.7);
      font-size: 2rem;
      text-transform: uppercase;
    }

    .secondarybtn {
      display: inline-block;
      text-decoration: none;
      font-weight: 500;
      color: crimson;
      border-radius: 2em;
      background: rgba(235, 235, 255, 1);
      font-size: 1.6rem;
      padding: 0.4em 1.5em;
      letter-spacing: 0.5rem;
      border: 0.2rem solid crimson;
      text-transform: uppercase;
      
    }

    .secondarybtn:hover {
      background: black;
      transform: scale(1.1);
    }

    .primarybtn:hover {
      color: whitesmoke;
      background: crimson;
      transform: scale(1.1);
    }

    /*---------Media Query-----------*/

    @media screen and (max-width:500px) {
      html {
        font-size: 50%;
      }

      .logo {
        float: none;
        display: block;
        text-align: center;
        width: 100%;
        margin: 0 0 0.5em 0;
      }

      ul {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
      }
      .dishbox {
        width: 90%;
        padding: 3em;
      }
      .box1 {
        width: 48%;
        height: 300px;
      }
      .box2 {
        width: 48%;
        height: 300px;
      }
      .dishtext h2 {
        font-size: 1.5rem;
      }

      .row {
        height: auto;
      }

      .row1 .featureImg,
      .row3 .featureImg,
      .row2 .featureText {
        float: none;
        width: 100%;
      }

      .row2 .featureImg,
      .row1 .featureText,
      .row3 .featureText {
        float: none;
        width: 100%;
      }
      

      .featureText h2 {
        font-size: 2rem;
      }
      .menuHeading h2 {
        text-align: center;
        font-size: 5rem;
      }
      .menuorder {
        text-align: center;
      }
      .menuorder a {
        margin-top: 1em;
        margin-left: 0;
      }
      
      .abouttextbox p {
        letter-spacing: 0rem;
      }
      .review-section h2 {
        font-size: 3rem;
      }
      .review-section .Textbox {
        height: auto;
        margin: 0;
        
      }
      .reviewpara {
        letter-spacing: 0rem;
      }
      .contactimgcontainer {
        width: 100%;
        float: none;
      }
      .formbox {
        width: 100%;
        float: none;
        height: auto;
      }
      .formcontainer {
        height: auto;
      }
    }