/*
    Import the desired font from Google fonts.
    */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;700&display=swap");

/*
    Define all colors used in this template


    */

    
:root {
  --main-color: #cec3ba;
  --text-color: #303e48;
  --circle-color: rgba(255, 255, 255, 0.8);
}

@page {
  /*
      This CSS highlights how page sizes, margins, and margin boxes are set.
      https://docraptor.com/documentation/article/1067959-size-dimensions-orientation
    
      Within the page margin boxes content from running elements is used instead of a
      standard content string. The name which is passed in the element() function can
      be found in the CSS code below in a position property and is defined there by
      the running() function.
      */
  size: A4;
  margin: 1.5cm 1.5cm 2cm 1.5cm;

  @bottom-left {
    content: element(footer);
    background-color: var(--main-color);
  }

  @bottom-right-corner {
    content: "";
    background-color: var(--main-color);
  }

  @bottom-left-corner {
    content: "";
    background-color: var(--main-color);
  }
}

@page: first {
  /*
      The first page gets a different style via the :first selector, as we want a full page
      cover image we set the margin to 0 and add the image with a background-size "cover".
    
      Also on the first page we do not want the footer with the restaurants address, which
      appears on all other pages, therefore we set the content to "" in the bottom left
      page margin box.
      */
  margin: 0;
  background-image: url("https://images.unsplash.com/photo-1546069901-d5bfd2cbfb1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2600&q=80");
  background-size: cover;

  @bottom-left {
    content: "";
  }
}

/*
    In the body we set the default text color and font family, the font got imported above
    from google fonts.
    */
body {
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
}

body {
  border: 20px solid transparent; /* A base border width that will show the image */
  padding: 20px; /* Adds padding to avoid content touching the border */
  border-image: url("Foodb.webp") 30 round; /* Replace 'food-border.png' with your image file */
  background-color: #fff; /* Ensures the body has a white background */
  margin: 0; /* Removes any default margin */
  box-sizing: border-box; /* Ensures padding is included in the element's width */
}
.menuPages {
  border: 0.5mm solid var(--main-color);
  padding: 10px;
}

/*
    Also our heading elements and <i> tag get their default font.
    */
h1,
h2,
i {
  font-family: "Crimson Pro", serif;
}

/*
    The links in the document should not be highlighted by an different color and underline
    instead we use the color value inherit to get the current texts color.
    */
a {
  color: inherit;
  text-decoration: none;
}

/*
    Around the headers H1 element we want to show a circle, this is done by applying border-radius 100%.
    Also the element needs to be centered on the page, for this we use position absolute and the transform
    property.
    */
header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--circle-color);
  border-radius: 100%;
  display: inline-block;
  width: 12cm;
  height: 12cm;
}

/*
    Around the circle itself there is another circle which has no background color but just a border.
    We again position this element and use the border-radius property. This time we just do not set a
    background color.
    */
header:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 1mm solid var(--circle-color);
  border-radius: 100%;
  display: inline-block;
  width: 13cm;
  height: 13cm;
}

/*
    The header on the cover page uses a different font family than all other H1 elements we have
    that's why we first overwrite the font. With the position and transform we move the element to the
    center of the circle.
    */
header h1 {
  font-family: "Montserrat", sans-serif;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
  width: 6cm;
  margin: 0;
}

/*
    To keep only the logo and restaurant name on the first page we use the CSS property page-break-before
    with the value always. This way the main menu always starts on a new page. In our case the second page.
    */
.menuPages {
  page-break-before: always;
}

/*
    Each menu section is within one SECTION element, these should not break inbetween if possible. This means
    if a section does not fit on one page, it will move it to the next page.
    */
section {
  page-break-inside: avoid;
  padding-bottom: 1cm;
}

/*
    All section headings will be italic and have a margin of 1cm on the top and bottom.
    */
section h1 {
  font-style: italic;
  margin: 1cm 0;
}

/*
    For all section headings, except the one for the special items we use the leader() function in an
    :after pseudo element to show the line next to the section title text. We need to change the font here
    otherwise the leader line will not appear solid ("____") but with spaces ("_ _ _ _ _").
    */
section:not(.specialItems) h1:after {
  font-family: "Montserrat", sans-serif;
  content: leader(solid);
  color: var(--main-color);
}

/*
    To display the images of an section on the left side and the menu items on the right we use flexbox and
    keep some space between them with the justify-content property.
    */
/* section .sectionContent {
  display: flex;
  justify-content: space-between;
} */

/*
    The images area will take 40% of the pages width.
    */

/*
    In the first section we will show only one image, a pizza.
    */
section .images.img01 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
}

section .images.img014 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
}

section .images.img011 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
}

section .images.img02 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
}

section .images.img02 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
}

/*
    For the second and special sections we show two images below each other. both get a height of 47.5%.
    In a later class definition you will see margin bottom of 5% for the first image.
    */
section .images .img02,
section .images .img03,
section .images .img08,
section .images .img09 {
  background-size: cover;
  background-position: center;
  display: block;
  height: 47.5%;
}

section .images .img02 {
  background-image: url("Thali1.avif");
  margin-bottom: 5%;
}

section .images .img03 {
  background-image: url("Thali2.avif");
}

/*
    In the third section there will be 4 images displayed. Each image will get a size of 47.5% by 47.5%,
    we use the background-size value "cover" to make sure the area is filled completely.
    */
section .images .img04,
section .images .img05,
section .images .img06,
section .images .img07 {
  background-size: cover;
  background-position: center;
  display: inline-block;

  width: 50% !important;
  height: 200px !important;
}

/*
    The two top images get a margin bottom of 5%.
    */
section .images .img04,
section .images .img05 {
  margin-bottom: 5%;
}

/*
    The two left images get a float left.
    */
section .images .img04,
section .images .img06 {
  float: left;
}

/*
    And the two right images will float on the right, this way we get the space between the images.
    */
section .images .img05,
section .images .img07 {
  float: right;
}

/*
    The top two images of the third section.
    */
section .images .img04 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img05 {
  background-image: url("rice1.jpg");
}

/*
    The last two images of the third section.
    */
section .images .img06 {
  background-image: url("rice2.jpg");
}

section .images .img07 {
  background-image: url("rice3.jpg");
  background-position: top center;
}

/*
    In the special section we will show two images below each other, the top one gets a margin bottom of 5%.
    */
section .images .img08 {
  background-image: url("birayani1.jpg");
  margin-bottom: 5%;
  width: 50%;
  height: 200px;
}

/*
    Here we set the second image of the special section.
    */
section .images .img09 {
  background-image: url("birayani2.jpg");
  width: 50%;
  height: 200px;
}

section .images .img081 {
  background-image: url("birayani1.jpg");
  margin-bottom: 5%;
}

/*
    Here we set the second image of the special section.
    */
section .images .img091 {
  background-image: url("birayani2.jpg");
}

section .images .img082 {
  background-image: url("birayani1.jpg");
  margin-bottom: 5%;
}

/*
    Here we set the second image of the special section.
    */
section .images .img092 {
  background-image: url("birayani2.jpg");
}

section .images .img083 {
  background-image: url("birayani1.jpg");
  margin-bottom: 5%;
}

/*
    Here we set the second image of the special section.
    */
section .images .img093 {
  background-image: url("birayani2.jpg");
}

section .images .img084 {
  background-image: url("birayani1.jpg");
  margin-bottom: 5%;
}

/*
    Here we set the second image of the special section.
    */
section .images .img094 {
  background-image: url("birayani2.jpg");
}
/*
    After the images we will style the menu items now, these get a width of 50%. The remaining % will be used
    as space between images and list items.
    */

/*
    For our menu items we use a standard HTML UL element, but we do not want the bullet points in front of
    each menu item.
    */
section .items ul {
  list-style-type: none;
  margin: 0;
}

/*
    We set a standard font size for the menu items name, price and description.
    */
section .items ul li {
  font-size: 10pt;
}

/*
    Each item in the menu list, which is not the first list item gets a margin top and bottom of 6mm.
    */
section .items ul li:not(:first-child) {
  margin: 6mm 0;
}

/*
    The description below the items name and price should max. take 80% of the available space.
    */
section .items ul li i {
  display: block;
  width: 80%;
}

/*
    The name of an menu item and the price should be bold and the text in uppercase.
    */
section .items ul li span {
  text-transform: uppercase;
  font-weight: bold;
}

/*
    Between the menu item's name and its price we use the leader function again to show a
    underline __________ the font needed to be changed to ensure no spaces between the line
    elements ("_ _ _ _").
    */
section .items ul li span:not(.price):after {
  font-family: "Montserrat", sans-serif;
  content: leader(solid);
  color: var(--main-color);
}

/*
    The price of a menu item should be shown on the right side, we use the float property for this.
    */
section .items ul li span.price {
  float: right;
}

/*
    For special menu items we have the specials section at the end of the menu. To highlight this we give that
    section a border.
    */
section.specialItems {
  border: 0.5mm solid var(--main-color);
  padding: 6mm;
  margin-top: 1cm;
}

/*
    There should be no extra space between the specials section border and the headline within that section
    therefore we set the margin top to 0.
    */
section.specialItems h1 {
  margin-top: 0;
}

/*
    All normal sections show the section title and an underline afterwards. The special section is showing
    it in the opposite way, first the underline then the section title. Again we use the leader function
    for the underline.
    */
section.specialItems h1:before {
  font-family: "Montserrat", sans-serif;
  content: leader(solid);
  color: var(--main-color);
}

/*
    For the notes we use a H3 element for the heading but set the font weight to normal and transform the text
    to uppercase.
    */
.note h3 {
  margin: 12mm 0 0 0;
  font-size: 10pt;
  font-weight: normal;
  text-transform: uppercase;
}

/*
    The note itself should be shown in italic thats why we use the <i> HTML element, additionally we set a
    font size of 10pt here in the CSS.
    */
.note i {
  font-size: 10pt;
}

/*
    The footer will be shown on all pages, except the first one. So we use position running to move it to a
    page margin box. Inside the footer we have 3 columns which we will create with a flexbox.
    */
footer {
  position: running(footer);
  display: flex;
  justify-content: space-between;
  font-size: 8pt;
}

/*
    For the second and third of these footer columns we also use flexbox so the headers like "Address" and
    "Hours" are on the left side and the actual information on the right side.
    */
footer div:not(:first-child) {
  display: flex;
  justify-content: space-between;
}

/*
    The bold tag for the second and third column get a margin right of 2mm so there is some space.
    */
footer div:not(:first-child) b {
  margin-right: 2mm;
}

/*
    All bold elements in the footer will transform their text content to uppercase.
    */
footer b {
  text-transform: uppercase;
}

/*
    Import the desired font from Google fonts.
    */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;700&display=swap");

/*
    Define all colors used in this template
    */
:root {
  --main-color: #cec3ba;
  --text-color: #303e48;
  --circle-color: rgba(255, 255, 255, 0.8);
}

@page {
  /*
      This CSS highlights how page sizes, margins, and margin boxes are set.
      https://docraptor.com/documentation/article/1067959-size-dimensions-orientation
    
      Within the page margin boxes content from running elements is used instead of a
      standard content string. The name which is passed in the element() function can
      be found in the CSS code below in a position property and is defined there by
      the running() function.
      */
  size: A4;
  margin: 1.5cm 1.5cm 2cm 1.5cm;

  @bottom-left {
    content: element(footer);
    background-color: var(--main-color);
  }

  @bottom-right-corner {
    content: "";
    background-color: var(--main-color);
  }

  @bottom-left-corner {
    content: "";
    background-color: var(--main-color);
  }
}

@page: first {
  /*
      The first page gets a different style via the :first selector, as we want a full page
      cover image we set the margin to 0 and add the image with a background-size "cover".
    
      Also on the first page we do not want the footer with the restaurants address, which
      appears on all other pages, therefore we set the content to "" in the bottom left
      page margin box.
      */
  margin: 0;
  background-image: url("https://images.unsplash.com/photo-1546069901-d5bfd2cbfb1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2600&q=80");
  background-size: cover;

  @bottom-left {
    content: "";
  }
}

/*
    In the body we set the default text color and font family, the font got imported above
    from google fonts.
    */
body {
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
}

/*
    Also our heading elements and <i> tag get their default font.
    */
h1,
h2,
i {
  font-family: "Crimson Pro", serif;
}

/*
    The links in the document should not be highlighted by an different color and underline
    instead we use the color value inherit to get the current texts color.
    */
a {
  color: inherit;
  text-decoration: none;
}

/*
    Around the headers H1 element we want to show a circle, this is done by applying border-radius 100%.
    Also the element needs to be centered on the page, for this we use position absolute and the transform
    property.
    */
header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--circle-color);
  border-radius: 100%;
  display: inline-block;
  width: 12cm;
  height: 12cm;
}

/*
    Around the circle itself there is another circle which has no background color but just a border.
    We again position this element and use the border-radius property. This time we just do not set a
    background color.
    */
header:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 1mm solid var(--circle-color);
  border-radius: 100%;
  display: inline-block;
  width: 13cm;
  height: 13cm;
}

/*
    The header on the cover page uses a different font family than all other H1 elements we have
    that's why we first overwrite the font. With the position and transform we move the element to the
    center of the circle.
    */
header h1 {
  font-family: "Montserrat", sans-serif;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
  width: 6cm;
  margin: 0;
}

/*
    To keep only the logo and restaurant name on the first page we use the CSS property page-break-before
    with the value always. This way the main menu always starts on a new page. In our case the second page.
    */
.menuPages {
  page-break-before: always;
}

/*
    Each menu section is within one SECTION element, these should not break inbetween if possible. This means
    if a section does not fit on one page, it will move it to the next page.
    */
section {
  page-break-inside: avoid;
}

/*
    All section headings will be italic and have a margin of 1cm on the top and bottom.
    */
section h1 {
  font-style: italic;
  margin: 20px 0;
}

/*
    For all section headings, except the one for the special items we use the leader() function in an
    :after pseudo element to show the line next to the section title text. We need to change the font here
    otherwise the leader line will not appear solid ("____") but with spaces ("_ _ _ _ _").
    */
section:not(.specialItems) h1:after {
  font-family: "Montserrat", sans-serif;
  content: leader(solid);
  color: var(--main-color);
}

/*
    To display the images of an section on the left side and the menu items on the right we use flexbox and
    keep some space between them with the justify-content property.
    */
/* section .sectionContent {
  display: flex;
  justify-content: space-between;
} */

/*
    The images area will take 40% of the pages width.
    */

/*
    In the first section we will show only one image, a pizza.
    */
section .images.img01 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
  width: 48%;
  height: 380px;
}

section .images.img011 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
  width: 48%;
  height: 300px;
}

section .images.img014 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
  width: 48%;
  height: 500px;
}
section .images.img02 {
  background-image: url("dal-tadka-recipe.jpg");
  background-size: cover;
  background-position: center;
  width: 48%;
  height: 300px;
}

/*
    For the second and special sections we show two images below each other. both get a height of 47.5%.
    In a later class definition you will see margin bottom of 5% for the first image.
    */

section .images .img02,
section .images .img03,
section .images .img08,
section .images .img09,
section .images .img10,
section .images .img11 {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  height: 200px;
}

section .images .img081,
section .images .img091 {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  height: 260px;
}

section .images .img083,
section .images .img093 {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  height: 400px;
}

section .images .img084,
section .images .img094 {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  height: 130px;
}

section .images .img082,
section .images .img092 {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  height: 180px;
}

section .images .img02 {
  background-image: url("Thali1.avif");
  margin-bottom: 5%;
}

section .images .img03 {
  background-image: url("Thali2.avif");
}

section .images .img10 {
  background-image: url("roti1.jpg");
  margin-bottom: 5%;
}

section .images .img11 {
  background-image: url("roti2.jpg");
}

/*
    In the third section there will be 4 images displayed. Each image will get a size of 47.5% by 47.5%,
    we use the background-size value "cover" to make sure the area is filled completely.
    */
section .images .img04,
section .images .img05,
section .images .img06,
section .images .img07 {
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: 50% !important;
  height: 350px !important;
}

section .images .img041,
section .images .img051,
section .images .img061,
section .images .img071 {
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: 50% !important;
  height: 430px !important;
}

section .images .img042,
section .images .img052,
section .images .img062,
section .images .img072 {
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: 50% !important;
  height: 600px !important;
}

section .images .img043,
section .images .img053,
section .images .img063,
section .images .img073 {
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: 50% !important;
  height: 320px !important;
}

section .images .img044,
section .images .img054,
section .images .img064,
section .images .img074 {
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: 50% !important;
  height: 700px !important;
}

section .images .img045,
section .images .img055,
section .images .img065,
section .images .img075 {
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: 50% !important;
  height: 580px !important;
}

section .images .img046,
section .images .img056,
section .images .img066,
section .images .img076 {
  background-size: cover;
  background-position: center;
  display: inline-block;
  width: 50% !important;
  height: 380px !important;
}

/*
    The two top images get a margin bottom of 5%.
    */
section .images .img04,
section .images .img05 {
  margin-bottom: 5%;
}

/*
    The two left images get a float left.
    */
section .images .img04,
section .images .img06 {
  float: left;
}

section .images .img041,
section .images .img051 {
  margin-bottom: 5%;
}

/*
    The two left images get a float left.
    */
section .images .img041,
section .images .img061 {
  float: left;
}

/*
    And the two right images will float on the right, this way we get the space between the images.
    */
section .images .img05,
section .images .img07 {
  float: right;
}

section .images .img042,
section .images .img062 {
  float: left;
}

/*
    And the two right images will float on the right, this way we get the space between the images.
    */
section .images .img052,
section .images .img072 {
  float: right;
}

section .images .img043,
section .images .img063 {
  float: left;
}

/*
    And the two right images will float on the right, this way we get the space between the images.
    */
section .images .img054,
section .images .img074 {
  float: right;
}

section .images .img044,
section .images .img064 {
  float: left;
}

/*
    And the two right images will float on the right, this way we get the space between the images.
    */
section .images .img053,
section .images .img073 {
  float: right;
}

section .images .img045,
section .images .img065 {
  float: left;
}

/*
    And the two right images will float on the right, this way we get the space between the images.
    */
section .images .img055,
section .images .img075 {
  float: right;
}

section .images .img046,
section .images .img066 {
  float: left;
}

/*
    And the two right images will float on the right, this way we get the space between the images.
    */
section .images .img056,
section .images .img076 {
  float: right;
}
/*
    The top two images of the third section.
    */
section .images .img04 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img05 {
  background-image: url("rice1.jpg");
}

section .images .img041 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img051 {
  background-image: url("rice1.jpg");
}

/*
    The last two images of the third section.
    */
section .images .img061 {
  background-image: url("rice2.jpg");
}

section .images .img071 {
  background-image: url("rice3.jpg");
  background-position: top center;
}

section .images .img042 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img052 {
  background-image: url("rice1.jpg");
}

/*
    The last two images of the third section.
    */
section .images .img062 {
  background-image: url("rice2.jpg");
}

section .images .img072 {
  background-image: url("rice3.jpg");
  background-position: top center;
}

section .images .img043 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img053 {
  background-image: url("rice1.jpg");
}

/*
    The last two images of the third section.
    */
section .images .img063 {
  background-image: url("rice2.jpg");
}

section .images .img073 {
  background-image: url("rice3.jpg");
  background-position: top center;
}

section .images .img044 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img054 {
  background-image: url("rice1.jpg");
}

/*
    The last two images of the third section.
    */
section .images .img064 {
  background-image: url("rice2.jpg");
}

section .images .img074 {
  background-image: url("rice3.jpg");
  background-position: top center;
}

section .images .img045 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img055 {
  background-image: url("rice1.jpg");
}

/*
    The last two images of the third section.
    */
section .images .img065 {
  background-image: url("rice2.jpg");
}

section .images .img075 {
  background-image: url("rice3.jpg");
  background-position: top center;
}

section .images .img046 {
  background-image: url("rice.jpg");
  background-position: top center;
}

section .images .img056 {
  background-image: url("rice1.jpg");
}

/*
    The last two images of the third section.
    */
section .images .img066 {
  background-image: url("rice2.jpg");
}

section .images .img076 {
  background-image: url("rice3.jpg");
  background-position: top center;
}

/*
    In the special section we will show two images below each other, the top one gets a margin bottom of 5%.
    */
section .images .img08 {
  background-image: url("birayani1.jpg");
  margin-bottom: 5%;
}

/*
    Here we set the second image of the special section.
    */
section .images .img09 {
  background-image: url("birayani2.jpg");
}

/*
    After the images we will style the menu items now, these get a width of 50%. The remaining % will be used
    as space between images and list items.
    */
section .items {
  padding: 0px 10px;
}

/*
    For our menu items we use a standard HTML UL element, but we do not want the bullet points in front of
    each menu item.
    */
section .items ul {
  list-style-type: none;
  margin: 0;
}

/*
    We set a standard font size for the menu items name, price and description.
    */
section .items ul li {
  font-size: 10pt;
}

/*
    Each item in the menu list, which is not the first list item gets a margin top and bottom of 6mm.
    */
section .items ul li:not(:first-child) {
  margin: 6mm 0;
}

/*
    The description below the items name and price should max. take 80% of the available space.
    */
section .items ul li i {
  display: block;
  width: 80%;
}

/*
    The name of an menu item and the price should be bold and the text in uppercase.
    */
section .items ul li span {
  text-transform: uppercase;
  font-weight: bold;
}

/*
    Between the menu item's name and its price we use the leader function again to show a
    underline __________ the font needed to be changed to ensure no spaces between the line
    elements ("_ _ _ _").
    */
section .items ul li span:not(.price):after {
  font-family: "Montserrat", sans-serif;
  content: leader(solid);
  color: var(--main-color);
}

/*
    The price of a menu item should be shown on the right side, we use the float property for this.
    */
section .items ul li span.price {
  float: right;
  padding-right: 8%;
}

/*
    For special menu items we have the specials section at the end of the menu. To highlight this we give that
    section a border.
    */
section.specialItems {
  border: 0.5mm solid var(--main-color);
  padding: 6mm;
  margin-top: 1cm;
}

/*
    There should be no extra space between the specials section border and the headline within that section
    therefore we set the margin top to 0.
    */
section.specialItems h1 {
  margin-top: 0;
}

/*
    All normal sections show the section title and an underline afterwards. The special section is showing
    it in the opposite way, first the underline then the section title. Again we use the leader function
    for the underline.
    */
section.specialItems h1:before {
  font-family: "Montserrat", sans-serif;
  content: leader(solid);
  color: var(--main-color);
}

/*
    For the notes we use a H3 element for the heading but set the font weight to normal and transform the text
    to uppercase.
    */
.note h3 {
  margin: 12mm 0 0 0;
  font-size: 10pt;
  font-weight: normal;
  text-transform: uppercase;
}

/*
    The note itself should be shown in italic thats why we use the <i> HTML element, additionally we set a
    font size of 10pt here in the CSS.
    */
.note i {
  font-size: 10pt;
}

/*
    The footer will be shown on all pages, except the first one. So we use position running to move it to a
    page margin box. Inside the footer we have 3 columns which we will create with a flexbox.
    */
footer {
  position: running(footer);
  display: flex;
  justify-content: space-between;
  font-size: 8pt;
}

/*
    For the second and third of these footer columns we also use flexbox so the headers like "Address" and
    "Hours" are on the left side and the actual information on the right side.
    */
footer div:not(:first-child) {
  display: flex;
  justify-content: space-between;
}

/*
    The bold tag for the second and third column get a margin right of 2mm so there is some space.
    */
footer div:not(:first-child) b {
  margin-right: 2mm;
}

/*
    All bold elements in the footer will transform their text content to uppercase.
    */
footer b {
  text-transform: uppercase;
}

.notice-container {
  background-color: white;
  width: 100%;
  text-align: center;
  border-radius: 8px;
}

.restaurant-name {
  color: #d0312d;
  font-size: 24px;
  margin: 0;
  font-weight: bold;
}

.subtitle {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.marathi-text {
  font-size: 12px;
  color: #333;
  margin-top: 15px;
}

.warning {
  color: #ff5722;
  font-weight: bold;
  font-size: 14px;
  margin: 15px 0;
}

.divider {
  border: 0;
  border-top: 1px solid #f1c40f;
  margin: 10px 0;
  width: 60%;
  margin: 10px auto;
}

.delivery-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 10px 0;
}

.swiggy-logo {
  width: 55px;
  margin-right: 5px;
}

.thank-you {
  font-style: italic;
  font-size: 14px;
  color: #000;
  margin: 10px 0;
}

.order-note {
  font-size: 10px;
  color: #666;
  margin: 0;
}
.logodiv {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}

.logo {
  max-width: 20%;
  height: auto; /* Maintains the aspect ratio of the image */
}

@media only screen and (max-width: 767px) {
  .logo {
    max-width: 100%;
    height: auto;
  }
  section .images.img01 {
    width: 87%;
    height: 174px;
    margin: 20px;
  }
  .riceimg,
  .ROTIimg,
  .drinksimg,
  .Starterimg,
  .Pizzaimg,
  .Chaatimg,
  .Vegetablesimg,
  .MediumSpicyimg {
    display: none;
  }
  section {
    padding-bottom: 0px;
  }

  section .images.img011 {
    margin: 18px;
    width: 87%;
    height: 163px;
  }
  section .images .img083,
  section .images .img093 {
    width: 100%;
    height: 188px;
  }
  section .images.img014 {
    display: none;
  }
  section h1 {
    text-align: center;
    font-weight: 600;
    font-size: 24px;
    font-style: italic;
    margin: 20px 0;
  }
  section .items ul li {
    font-size: 8pt;
  }
  section .items ul li:not(:first-child) {
    margin: 3mm 0;
  }
}
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .logo {
    max-width: 42%;
    height: auto;
  }
}

@media only screen and (max-width: 1366px) and (min-width: 1024px) {
  .logo {
    max-width: 23%;
    height: auto;
  }
}