/* ADD YOUR CUSTOM CSS TO THIS FILE BELOW */

#mainNav .container-fluid {
    margin-left: 4.5vw;
	margin-right: 4.5vw;
                          }

.navbar-brand img {
  height: 40px;
  width: auto;
  margin-top: -4px;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
  height: 60px;
}

.nav-link {color: #B6BFB8;}

.navbar-dark{--bs-navbar-active-color:#E8E4E2;}

.bg-dark{ background-color: #4E5424 !important;}

.bg-light {background-color: #B6BFB8 !important;}

.navbar-toggler {color: #E8E4E2;}

.navbar-toggler-icon {color: #E8E4E2;}

.navbar-collapse {background-color: #4E5424 !important;
	padding-left: 1rem;
	padding-bottom: .5rem;
                 }

html, body {
  overflow-x: hidden;
  overscroll-behavior: none;
  scroll-behavior: smooth;
           }

body {
  padding-top: 60px;
  margin: 0;
  background-color: #9DA57E;
  font-family: "Lexend Deca", "Helvetica", sans-serif;
  font-weight: 500 ;
  font-style: normal;
     }


h1, #menu h2, #merch h2, #about h2, #contact h2 {
	font-family:"Croissant One", "Georgia", serif;
    font-weight: 400;
    font-style: normal;
                                                }

h1 {
	color: #E8E4E2;
	text-shadow: -2px 2px 2px rgba(0, 0, 0, .2);
    font-size: clamp(2.5rem, 11.2vw, 11.2vw);
	text-transform: uppercase;
   }

h2, h3 {
  margin-bottom: 0;
  color: #434A21;
       }

#welcome, #menu, #merch, #about, #contact {scroll-margin-top: 60px;}

#welcome h2 {
	font-size: clamp(2.5rem, 4.5vw, 4.5vw);
	margin-top: 3.5vw;
	margin-left: 4.5vw;
            }

.btn-custom {
  font-weight: 400;
  font-style: normal;
  font-size: clamp(.8rem, 1.5vw, 1.5vw);
  margin-left: 4.5vw;
  margin-top: 1rem;
            }

@media (max-width: 768px){
	#welcome h2 {
		margin-left: 2rem;
				}
	.btn-custom{
		margin-left: 2rem;
		margin-bottom: 2rem;
			   }
	.about-text p {font-size: .8rem!important;}
	#merch h2{padding-top: 1rem;}
	#merch h3{font-size: 1rem!important;}
	#contact .container{margin: 0;}
	
                         }

/*parallex scrolling*/
body, html {
  height: 100%;
           }

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

  background-image: url("assets/blurarielcafe.png");
  min-height: 40vh;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
          }

.parallax img {
 margin-top: -40px;
 width: auto;
 max-height: 35vh;
              }

@media (max-width: 576px){
  .parallax {
    min-height: 20vh;
    background-attachment: scroll;
            }
   .parallax img{
		max-height: 18vh;
		margin-top: -20px;
	             }
						 }

/*end parallex scrolling*/

.tab-content{
  text-align: center;  
			}

#menu h2, #merch h2, #about h2, #contact h2 {
	font-size: clamp(2.5rem, 4vw, 4vw);
											}

#menu {
	scroll-margin-top: 60px;
	padding: 2rem;
      }

#menu h2 {
	text-align: center;
         }


.menuitems {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
          }

.name p {
	font-weight: 300;
	font-size: .8rem;
		 }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
   }



#menu .nav-link {
  padding-bottom: 0;
  font-size: clamp(1rem, 1.5vw, 1.5vw);
  font-weight: 500;
  color: #343434;
                }

#menu .nav-link:hover {
  color: #4E5424 !important;
                      }

#menu .nav-link.active {
	color: #000 !important;
					   }

.price ul li {line-height: 3.8rem;}


#about img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
           }

#merch, #contact {
	margin-top: 2rem;
	margin-bottom: 2rem;
	margin-left: 3rem;
	margin-right: 3rem;
       }

#merch h3, #contact h3 {
	font-size: 2vw;
	margin-top: 3vh;
          }

.merch-text {
	 padding-left: 2rem;
            }

.card{
    background-color:#B6BFB8;
	border: none;
     }

.card-footer{border-top: var(--bs-card-border-width) solid #000;}

.card-body, .card-footer {background-color: #E8E4E2;}


.card:hover {
          box-shadow: 0 0 10px 2px #4E5424;
          border: 1px solid black;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

.card-text, .popover {
	font-size: .8rem;
                     }

.card-text {
	font-weight: 300 ;
	padding: 1vw;
           }

.popover {
	font-weight: 400 ;
         }

.img-card {
  background-color: #B6BFB8;
  width: 100%; 
  height: auto;
          }

.modal-bg { background-color: #E8E4E2;}

.modal-body {padding: 0;}

.modal-body .row>*{padding-left: 0;}

.modal-header {border-bottom: var(--bs-modal-footer-border-width) solid #000;}

.modal-footer {border-top: var(--bs-modal-footer-border-width) solid #000;}

.about-text {
	padding-left: 5.2rem;
    padding-right: 3rem;
	padding-top: 2vw;
            }

.about-text p {
	font-size: 1vw;
	padding-top: 1.5vw;
              }

.form-control, .form-control:focus {background-color: #E8E4E2;}


input.form-control:focus, textarea.form-control:focus {
    outline: none;
    box-shadow: 0 0 10px 2px #4E5424;
    border-color: black;
                                                      }

#contact .container {
  width: 100%;
                    }

.copyright-text { 
	color: #B6BFB8;
	font-weight: 300;
                }