@import url(https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);


* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}


html, body {
   max-width: 100%;
   overflow-x: hidden;
}


body {
   background-color: black;
   color: white;
   line-height: 1.75;
   font-family: "Cinzel Decorative", serif;
   overflow-x: clip;
}




header {
   background-color: black;
   position: sticky;
   top: 0;
   z-index: 10;
   overflow: visible;
}


nav {
   display: flex;
   justify-content: space-around;
   align-items: stretch;
   color: white;
   padding-left: 15px;
   padding-right: 15px;
   min-height: 50px;
   flex-wrap: wrap;
}

nav:nth-of-type(2) {
   padding: 10px;
}


header, nav, .flex-item {
   overflow: visible !important;
}

.cta-banner {
   text-align: center;
   font-family: 'Lato', sans-serif;
   font-size: 1.3rem;
}


.flex-item ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   height: 100%;
}


.mobile-menu {
   order: 2;
   width: 100%;
   text-align: right;
   height: 0;
   overflow: hidden;
   transition: height 0.4s ease-in-out;
}


.mobile-menu.open {
   display: block;
   height: 100%;
}


.mobile-menu ul {
   list-style-type: none;
}


.mobile-menu ul li {
   line-height: 0.5;
   font-family: 'Lato', sans-serif;
}


.mobile-nav-link ,
.mobile-nav-link[data-link="menu"],
.subcategory a {
   text-decoration: none;
   font-size: 18px;
   padding-right: 14px;
   padding-top: 16px;
   padding-bottom: 16px;
   padding-left: 14px;
   display: block;
   text-transform: uppercase;
}


.mobile-menu > ul li a:hover,
.mobile-menu > ul li a:active {
   background-color:#9e000a;
}


.mobile-nav-link.active {
   background-color: #9e000a;
}


.mobile-submenu-container {
   display: flex;
   justify-content: flex-end;
   position: relative;
}


.mobile-menu span {
   position: absolute;
   top: 35%;
   right: 0;
   width: 9px;
   height: 9px;
   border-right: 2px solid white;
   border-bottom: 2px solid white;
   transform: translateX(-10px) rotate(45deg);
   cursor: pointer;
}


.mobile-menu-list {
   position: relative;
}


.mobile-nav-link[data-link="menu"] a {
   padding-right: 14px !important;
   padding-top: 8px !important;
   padding-bottom: 8px !important;
   text-decoration: none;
}


.list {
   position: relative;
}


.flex-item > ul > li {
   height: 100%;
   display: flex;
   align-items: center;
   margin: 1px;
}


.flex-item ul li:hover {
   background-color: #9e000a;
}


.flex-item ul li.active {
    background-color: #9e000a;
}


li > div {
   display: flex;
   align-items: center;
   justify-content: center;
}


li > div:hover {
   background: #9e000a;
}


#menu + span {
   width: 10px;
   border-bottom: 2.5px solid white;
   border-right: 2.5px solid white;
   height: 10px;
   transform: rotate(45deg);
   margin-right:10px;
   position: relative;
   bottom: 2px;
}


.submenu {
   font-family: "Lato", sans-serif;
   position: absolute;
   top: 100%;
   left: 0;
   text-align: left;
   white-space: nowrap;
   transition: opacity 0.2s ease;
   z-index: 999;
   visibility: hidden;
}


.submenu.focus {
   display: block;
   visibility: visible;
   opacity: 1;
   flex-direction: column;
   height: max-content !important;
   width: max-content !important;
   background-color: black;
}


.submenu > li a {
   text-decoration: none;
   margin-top: 5px;
   font-size: 1.1rem;
}


.submenu-mobile {
   font-family: "Lato", sans-serif;
   text-align: left;
   height: 0;
   visibility: hidden;
   display: none;
}


.submenu-mobile.focus {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 0 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
 -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.submenu-mobile.focus::-webkit-scrollbar {
  display: none;
}

.submenu-mobile .subcategory {
  flex: 0 0 auto;
}



.subcategory {
   border: none;
   width: 100%;
   line-height: 0;
}


.subcategory a {
   text-transform: none !important;
}


.submenu-mobile > .subcategory {
   padding: 0px;
}


.subcategory:hover {
   background-color: #9e000a;
}


#push-right a {
   text-decoration: none;
   margin-right: 20px;
}


.flex-item {
   margin-top: 5px;
   margin-bottom: 5px;
   display: flex;
   align-items: center;
}


.flex-item h1 {
   font-weight: 400;
   font-size: 2rem;
   text-align: left;
}


.flex-item h2 {
   font-weight: 700;
   font-size: 1.5rem;
   text-align: right;
}


a {
   text-decoration: underline;
   color: inherit;
   font-weight: 700;
}


a[title="Pizza & Bar"] {
   letter-spacing: 0.1ch;
}


a span {
   font-size: 1.3rem;
   font-weight: 600;
}


.tab-button {
   background: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 1.25rem;
   font-weight: 700;
   color: white;
   border: none;
   padding: 0 12px;
   height: 100%;
   margin: 1px;
   text-transform: uppercase;
}


.tab-button:hover {
   background: #9e000a;
}


.tab-button.active{
   background: #9e000a;
}


#imageBox {
   background-image: url('https://www.franciscosegarra.com/wp-content/uploads/2021/06/interior-design-of-pizzerias.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   height: 700px;
   display: flex;
   align-items: center;
   justify-content: center;
}


#imageBox h1 {
   color: white;
   text-align: center;
}


#pizzaBarName {
   font-size: 5rem;
   font-weight: 600;
   text-shadow: 7px 5px 4px black;
   color: white;
   letter-spacing: 0.1ch;
}

footer a {
   text-decoration: none;
   font-weight: 400;
}


footer div {
   background-color: #9e000a;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 5px 0;
}


footer div div {
   width: 33.33%;
   float: left;
   min-height: 1px;
   color: white;
   font-family: "Lato", sans-serif;
   font-size: 20px;
   text-align: center;
}


.menu-toggle-container {
   width: 20% !important;
   text-align: right;
   display: none;
}


.menu-toggle-btn {
   color: #f5f5f5;
   font-size: 16px;
   text-transform: uppercase;
   padding-top: 10px;
   padding-right: 14px;
   padding-bottom: 10px;
   padding-left: 14px;
   border-color: rgba(0, 0, 0, 0.1);
   border: none;
   border-radius: 0;
   background-color: black;
}


.menu-toggle-btn:hover,
.menu-toggle-btn.active {
   background-color: #9e000a;
   border: none;
   color: #f5f5f5;
   font-size: 16px;
   text-transform: uppercase;
   padding-top: 10px;
   padding-right: 14px;
   padding-bottom: 10px;
   padding-left: 14px;
   border-color: rgba(0, 0, 0, 0.1);
   border: none;
   border-radius: 0;
}


.svg-container {
   display: inline-block;
   position: relative;
   width: 1.4em;
   height: 1.4em;
   vertical-align: middle;
}


.svg-logo {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   overflow: hidden;
}


.svg-piece {
   fill: currentColor;
}

.disclaimer {
    font-family:'Lato', sans-serif;
}


@media (max-width: 1024px) {
   html, body {
       overflow: auto;
       overflow-x: hidden;
   }
}


@media (max-width: 768px) {


    body {
       font-size: 14px;
       line-height: 1.45;
   }


   nav {
       padding-left: 0;
       padding-right: 0;
       flex-wrap: wrap;
   }


   nav .flex-item:first-of-type {
       width: 80% !important;
       margin: 0;
   }


   .flex-item h1 {
       font-size: 1.5rem;
   }


   .flex-item h2 {
       font-size: 1.25rem;
   }


   .menu-toggle-container {
       display: block !important;
   }


   #nav-menu {
       display: none !important;
   }


   #push-right {
       margin-left: auto;
   }


   footer div {
       margin: auto;
   }


   footer div div {
       font-size: 1.1rem;
       align-items: center;
       padding: 0;
   }


   footer div div {
       margin: 15px auto;
       font-size: 1rem;
   }

   .cta-banner {
      font-size: 1.1rem;
   }

   .cta-banner p {
      margin-bottom: 10px;
   }

   .cta-banner a {
      font-size: 1.5rem;
   }

}


@media (max-width: 480px) {
   .subcategory a {
       font-size: 1rem;
       font-weight: 500;
   }


   #business-name {
       font-size: 1.4rem;
   }


   .flex-item h1 {
       font-size: 1.3rem;
       margin-left: 10px;
   }


   .flex-item h2 {
       font-size: 1.4rem;
   }


   #imageBox {
       height: 250px;
   }


   #nelliesName {
       font-size: 2rem;
   }


   footer div div {
       font-size: 0.8rem;
       font-size: 1rem;
   }


   .mobile-nav-link,
   .mobile-nav-link[data-link="menu"] a {
       font-size: 0.9rem;
   }


   footer div div {
       margin: 10px auto;
       font-size: 0.7rem;
   }

   .cta-banner a {
      font-size: 1.4rem;
   }
}





#descriptionBox {
   color: white;
   background-color: black;
   font-family: "Lato", sans-serif;
   letter-spacing: 1px;
   text-align: center;
   padding: 50px;
   margin: 0;
}


#descriptionBox div {
   font-size: 1.8rem;
}


#descriptionBox div:nth-of-type(2) {
   margin: 20px auto 20px auto;
   padding: 20px;
   text-decoration: none;
}

#para2 {
    font-size: 2rem;
}

#para2 a {
    text-decoration: none;
    cursor:auto;
}

#descriptionBox button {
    font-size: 1.2rem;
    padding: 15px 30px;
    text-transform: uppercase;
    font-weight: 600;
    background-color: white;
    border: none;
    cursor: pointer;
}


#contactBox {
   margin-top: 50px;
   font-family: "Lato", sans-serif;
   font-weight: 700;
   text-align: center;
   color: black;
   font-size: 1.1rem;
}


#contactInfo {
   margin: 0 0 10px;
}


#contactRef {
   text-decoration: underline;
}


#imageBox {
   background-image: url('https://www.franciscosegarra.com/wp-content/uploads/2021/06/interior-design-of-pizzerias.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   height: 700px;
   display: flex;
   align-items: center;
   justify-content: center;
}


.flex-layout {
   display: flex;
}


#first-row {
   height: 375px;
}


#first-row .imageGallery:first-of-type {
   background-image: url('https://as2.ftcdn.net/jpg/01/58/59/77/1000_F_158597762_82bmWlozorIGtptdCypSptXaZ0Ur3xa2.jpg');
} 

#first-row .imageGallery:nth-child(2) {
   background-image: url('https://media.istockphoto.com/id/496626684/photo/pizza-dough.jpg?s=612x612&w=0&k=20&c=qx8vPdT4Riw6wlb7Wbq8nLuRMikmbCKrKkD71Z85FUA=');
}


#first-row .imageGallery:nth-child(3) {
   background-image: url('https://media.istockphoto.com/id/899907172/photo/baked-tasty-margerita-pizza-near-oven.jpg?s=612x612&w=0&k=20&c=r3J2p-ixkOCZG2VejNxN-CvMHnQhhkOSSh0C9fStV0g=');
}


#first-row .imageGallery:first-of-type,
#first-row .imageGallery:nth-child(2),
#first-row .imageGallery:nth-child(3) {
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: scroll;
   background-size: cover;
}


#second-row {
   background-color: black;
}


.imageGallery {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}


.imageGallery img {
   width: 100%;
   max-height: 300px;
   display: block;
}


.contact-info {
   text-align: center;
   margin: 50px;
   line-height: 5;
   background-color: black;
   color: white;
   padding: 50px;
   letter-spacing: 2px;
   font-family: 'Lato';
   font-size: 1.5rem;
   text-transform: uppercase;


}


.contact-info a {
   background-color: black;
   color: white;
   padding: 20px;
   text-transform: uppercase;
   font-family: 'Lato', sans-serif;
   font-weight: 800;
   font-size: 1.5rem;
}


.parallax-outer {
 position: relative;
 height: 100vh;
 overflow: hidden;
}


.parallax-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 170%;
   background-image: url('https://images.unsplash.com/photo-1513104890138-7c749659a591?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGl6emF8ZW58MHx8MHx8fDA%3D');
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
   transform: translateY(0);
}


.text-container {
   position: relative;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
}


.parallax-outer h2 {
   font-size: 4rem;
   text-shadow: 2px 2px 2px black;
}


@media (max-width: 1024px) {
   .parallax-bg {
       background-attachment: scroll !important;
       background-position: center center;
       background-size: cover;
       transform: none !important;
   }
}




@media (max-width: 768px) {


   #descriptionBox div {
       font-size: 1.5rem;
   }


   #descriptionBox div:nth-of-type(2) {
       margin: 50px auto 20px auto;
       text-decoration: none;
   }
  
   #imageBox {
       padding-left: 0;
       padding-right: 0;
       height: 300px;
   }


   #pizzaBarName {
       font-size: 3.5rem;
   }


   #imageBox h1 {
       text-align: center;
       transform: rotate(0deg);
   }


   .flex-layout {
       flex-direction: column;
   }


   .imageGallery {
       max-width: 400px;
       margin: auto;
   }


   #contactBox {
       margin-top: 20px;
   }


   #contactInfo {
       margin: 0 20px 0 20px;
   }


   #first-row {
       display: none;
   }


   #first-row .imageGallery:first-of-type {
       width: 100%;
   }


   #second-row {
       background: none;
   }


   .imageGallery img {
       display: flex;
   }


   .contact-info {
       line-height: 4;
       font-size: 1.1rem;
   }


   .parallax-outer {
       height: 400px;
   }


   .parallax-bg {
       height: 100%;
   }


   .text-container {
       height: 120%;
       line-height: 2;
   }


   .text-container h2 {
       font-size: 2rem;
   }


}


@media (max-width: 480px) {
  
   #pizzaBarName {
       font-size: 2rem;
   }


   #imageBox h1 {
       transform: rotate(0deg);
       text-align: center;
   }


   .text-container {
       height: 100%;
   }


   .text-container h2 {
       font-size: 1.8rem;
   }


   #descriptionBox {
       padding: 30px;
       line-height: 2;
   }


   #descriptionBox div {
       font-size: .9rem;
   }

   #para2 {
    font-size: 1.1rem;
   }


   .contact-info p:last-child {
       margin-top: 40px;
   }
  
   #descriptionBox div {
       font-size: 0.8rem;
   }


   #descriptionBox div:nth-of-type(2) {
       margin: 1rem auto;
       font-size: 0.7rem;
   }


   .imageGallery img {
       width: 75%;
       margin: auto;
   }


   .contact-info {
       margin:3rem;
       line-height: 2;
       padding: 0;
       font-size: 1rem;
       text-transform: none;
       letter-spacing: 0px;
   }


   .contact-info p {
       margin-top: 1.5rem;
   }


   .contact-info a {
       padding: 0;
       font-size: 0.9rem;
   }


   .text-container h2 {
       font-size: 1.7rem;
   }


   .parallax-outer {
       height: 300px;
   }
}

#storyHeader {
   margin: 20px;
}


#storyHeader h2 {
   font-size: 40px;
   text-align: center;
}


#containerDiv {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
   min-width: 0;
}


#flexDiv {
   display: flex;
}


.a-flex-item {
   width: 50%;
   padding: 20px 30px;
}


.history-para {
   font-family: "Lato", sans-serif;
   font-size: 20px;
   margin: 0 0 15px;
   font-weight: 300;
}


#staffImage {
   height: auto;
   max-width: 100%;
}


#orderMenuDiv {
   display: flex;
   flex-direction: column;
   min-height: 0;
   max-width: 1100px;
   margin: auto;
   min-width: 0;
   padding: 20px;
   margin-bottom:20px;
}


.b-flex-item {
   width: 100%;
   min-height: 1px;
   padding: 10px;
   text-align: center;
}


.b-flex-item:nth-of-type(2) {
   margin-top: 20px;
   margin-bottom: 20px;
}


#placeOrderPara {
   font-family: "Lato", sans-serif;
   font-size: 35px;
   text-align: center;
   margin: 0 0 10px;
   font-weight: 600;
}


#menuLink {
   text-align: center;
   font-family: 'Lato', sans-serif;
   line-height: 18px;
   padding: 20px 40px;
   background-color: white;
   color: black;
   cursor: pointer;
   font-weight: 600;
   font-size: 1.1em;
   text-transform: uppercase;
}


#imgGllryRow1,
#imgGllryRow2 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   width: 100%;
   padding: 0;
   gap: 10px;
}


.photo-about-gallery {
   aspect-ratio: 4 / 3;
   min-height: unset;
   height: auto;
}

.photo-about-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#imgGllryRow2 > .photo-about-gallery {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}


#imgGllryRow2 .photo-about-gallery:nth-child(1) {
   background-image: url('https://media.istockphoto.com/id/699144432/photo/raise-your-glasses-for-a-toast.jpg?s=612x612&w=0&k=20&c=cbTq6vSzZFxQvYdqHNVndU7msZCHm1nyoKRUmym9lhk=');
}


#imgGllryRow2 .photo-about-gallery:nth-child(2) {
   background-image: url('https://cdn.create.vista.com/api/media/small/235985752/stock-photo-cropped-view-friends-toasting-glasses-beer-bar');
}


#imgGllryRow2 .photo-about-gallery:nth-child(3) {
   background-image: url('https://media.istockphoto.com/id/1405280562/photo/people-eating-guacamole-at-restaurant.jpg?s=612x612&w=0&k=20&c=X70bRSFh4Pd50ywVJETpxY1552kIZFjtQrVCc4l3iyo=');
}


#imgGllryRow2 .photo-about-gallery:nth-child(4) {
   background-image: url('https://thumbs.dreamstime.com/b/cook-chef-making-delicious-pizza-restaurant-close-up-118152952.jpg');
}


#imgGllryRow2 .photo-about-gallery:nth-child(5) {
   background-image: url('https://images.pexels.com/photos/17626467/pexels-photo-17626467/free-photo-of-pizza-boxes-in-a-restaurant.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}


@media (max-width: 1024px) {
   .history-para:lastof-type {
       white-space: nowrap;
   }
}


@media (max-width: 820px) {
   #flexDiv {
       display: block;
   }


   .a-flex-item {
       width: auto;
   }
}


@media (max-width: 768px) {
   #flexDiv {
       flex-direction: column;
   }


   .a-flex-item {
       margin: auto;
       width: 100%;
       padding: 20px 100px;
   }


   #imgGllryRow1,
   #imgGllryRow2 {
       background: none;
       grid-template-columns: 1fr;
       padding: 20px;
   }


   #imgGllryRow2 {
       display: none;
   }


   .photo-about-gallery {
       margin: 0;
       width: 100%;
   }


   .photo-about-gallery img {
       margin: auto;
   }


   .b-flex-item:nth-of-type(2) {
       margin-top: 0px;
   }


   #placeOrderPara {
       font-size: 1.4rem;
   }


   .history-para {
       font-size: 1.2rem;
   }


   #menuLink {
       font-size: 1.1em;
       padding: 15px 30px;
   }
}


@media (max-width: 480px) {
   #storyHeader h2 {
       font-size: 2rem;
   }


   .a-flex-item {
       padding: 10px 25px;
   }


   .history-para {
       font-size: 1rem;
       line-height: 2;
   }


   #placeOrderPara {
       font-size: 1.4rem;
   }


   .b-flex-item {
       padding: 0;
   }


   #menuLink {
       font-size: 1.2em;
   }
}

#menuHeader {
   max-width: 1100px;
   min-height: 0;
   padding: 0;
   margin: 25px auto 0 auto;
}




#menuTopHeader {
   display: flex;
   align-items: center;
}




#pizzaBarMenuName {
   margin-bottom: 0px;
   margin-top: 20px;
   margin-right: 20px;
   margin-left: 20px;
   width: 80%;
}


#pizzaBarHeadline {
   font-size: 49px;
   text-align: left;
   margin-top: 0px;
   margin-bottom: 25px;
}


.menu-header-item span {
   font-weight: 400;
}


#viewMenuContainer {
   margin-top: 20px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 20px;
   width: 10%;
}




#viewMenu {
   color: white;
   font-family: "Lato", sans-serif;
   font-weight: 300;
   text-align: right;
   margin: 0 0 10px;
}




#viewMenu p {
   text-transform: uppercase;
}




#menuImg {
   width: 10%;
   max-width: 100%;
   display: inline-block;
   line-height: 0;
}




#menuImg img {
   height: auto;
   max-width: 100%;
   width: 100px;
   display: inline;
}




#sectionLine {
   margin: 20px;
}




#separator {
   border-top: 1px solid #161616;
   max-width: 50%;
   margin: auto;
}




#menuTitle {
   margin: 10px;
}




#menuTitle h2 {
   font-weight: 400;
   font-size: 40px;
   text-align: center;
   padding: 0 !important;
   margin: 0 !important;
}




#subtitle {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-right: 20px;
   margin-left: 20px;
   text-align: center;
}




#subtitle p {
   margin: 0 0 10px;
}




.menu-section {
   min-height: 1px;
   padding: 20px;
   margin-top: 30px;
   width: 100%;
}




.menu-section h2 {
   margin-top: 0px;
   text-align: center;
   font-size: 30px;
}


.parallax-wrapper {
   position: relative;
   width: 100%;
   height: 400px;
   overflow: hidden;
   z-index: 0;
}




.food-background-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 150%;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: unset;
   will-change: transform;
   z-index: -1;
}




.food-item-container {
   margin-bottom: 12px;
   padding-bottom: 12px;
   border-bottom: 1px solid #ddd;
   font-family: "Lato", sans-serif;
}




.food-item-top-header {
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: space-between;
}




.food-item-bottom-header {
   font-size: 0.9em;
   line-height: 1.4;
   margin-top: 4px;
}




.food-item-name {
   font-weight: 600;
   font-size: 1.05em;
   flex: 1;
}




.food-section {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px 24px;
   padding: 20px;
}




.food-section p {
   white-space: normal;
   overflow-wrap: break-word;
}




.additional-items-container {
   font-size: 17px;
   text-align: center;
   margin-bottom: 40px;
   margin-top: 50px;
   grid-row: 1 / 1
}


.additional-items-container:last-child {
   margin-bottom: 70px;
}


@media (max-width: 820px) {
   #pizzaBarMenuName {
       width: 70%;
   }
}


@media (max-width: 768px) {
   #menuTopHeader {
       flex-direction: column;
   }


   #pizzaBarHeadline {
       font-size: 2.5rem;
   }


   #viewMenuContainer {
       width: auto;
       margin-right: 0;
   }


   #menuImg {
       width: auto !important;
   }


   #menuBottomHeader {
       margin-top: 45px;
   }


   #menuTitle h2 {
       font-size: 2rem;
   }


   .food-background-img {
       background-attachment: unset;
   }


   .food-section {
       grid-template-columns: 1fr;
   }


   .food-item-container {
       width: 100%;
   }


   .food-item-name {
       margin-right: 60px;
   }


   .additional-items-container {
       margin: 0;
       font-size: 0.8rem;
       padding: 0.2rem;
   }
}


@media (max-width: 480px) {
   #pizzaBarHeadline,
   #menuTitle h2 {
       font-size: 1.8rem;
   }


   #subtitle {
       margin-left: 10px;
       margin-right: 10px;
   }


   .menu-section h2 {
       font-size: 1.2rem;
       font-weight: lighter;
   }


   .parallax-wrapper {
       height: 200px;
   }


   .food-section {
       gap: 10px 24px;
   }


   .food-item-top-header {
       font-weight: 400;
   }


   .food-item-name {
       font-weight: 400;
   }


   .food-item-name {
       font-size: 1em;
   }


   .food-item-bottom-header {
       line-height: 1.8;
   }

}

#h1Container {
   margin: 20px;
}


.h1-tab {
   font-weight: 600;
   font-size: 40px;
   text-align: center;
}


#findUsContainer {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: auto;
   width: 80%;
}


#ownersFigure {
   text-align: center;
   margin-top: 20px;
}


figcaption {
   font-size: 1.5rem;
   letter-spacing: 0.2ch;
}


#ownersImg {
   height: auto;
   width: 100%;
   display: block;
   object-fit: cover;
   max-width: 500px;
   margin: 25px auto;
}


#googleMaps {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   overflow: hidden;
}


iframe {
   display: block;
   height: 600px;
   width: 100%;
   border: 0;
}


#contactFormContainer {
   margin: auto auto 2rem;
   padding: 3rem 2rem;
   max-width: 700px;
   background-color: #000;
   border-radius: 8px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
   color: #f8f4ef;
   font-family: 'Lato', sans-serif;
}


#contactFormContainer span {
   color: #fff7f0;
   font-size: 2.2rem;
   font-family: 'Cinzel Decorative';
   display: block;
   text-align: center;
   margin-bottom: 2rem;
}


label {
   display: block;
   color: #e8e1d9;
   font-size: 1rem;
   margin-top: 1.5rem;
   font-family: 'Lato', sans-serif;
}


input,
textarea {
   background-color: #1b1b1b;
   color: #f5f5f5;
   border: none;
   padding: 0.75rem 0.5rem;
   font-size: 1rem;
   width: 100%;
   font-family: 'Lato', sans-serif;
   margin-top: 0.4rem;
   transition: border-color 0.3s ease;
}


input:focus,
textarea:focus {
 border-bottom: 1px solid #9e000a;
 outline: none;
}


input::placeholder,
textarea::placeholder {
 color: #aaa;
 font-style: italic;
}


#submitDiv {
 text-align: center;
 margin-top: 2.5rem;
}


input[type="submit"] {
   background-color: #9e000a;
   color: #fff7f0;
   font-family: 'Cinzel Decorative', cursive;
   font-size: 1.1rem;
   border: none;
   padding: 0.8rem 2rem;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}


input[type="submit"]:hover {
   background-color: #7c0008;
}


#errorDiv {
   color: #ffb3b3;
   font-size: 0.95rem;
   text-align: center;
   margin-top: 0.5rem;
}


@media (max-width: 768px) {
   .h1-tab {
       font-size: 1.5rem;
   }


   #findUsContainer {
       flex-direction: column;
       width: 100%;
   }


   #googleMaps,
   #ownersDiv {
       margin: 10px auto;
   }

   iframe {
    width: 80%;
    margin: auto; 
    height: 500px;
   }


   #ownersFigure {
       text-align: center;
       margin-top: 20px;
   }

   figcaption {
       font-size: 1rem;
   }


   #contactFormContainer span {
       font-size: 1.6rem;
   }


   input[type="submit"] {
       font-size: 0.9rem;
   }
}

@media (max-width: 480px) {
    iframe {
        width: 70%;
        margin: auto;
        height: 300px;
    }
}