*{
    font-family: "Source Sans 3", sans-serif;
    background-color: rgb(243, 243, 243);
    overflow-x: visible;
    /* width: 100%; */
  }

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

/* Navbar  Css */

.navbar ul {
    /* justify-content: center; */
    list-style-type: none;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #8B0000;
  }
  
  .navbar a {
    text-decoration: none;
    color: black;
  }
  
  .navbar a:hover{
    color: #8B0000;
  }
  
  .navbar ul li {
    padding-right: 30px;
  }


  /* img 01 */

  .img-container{
    /* display: grid; */
    place-items: center;
    margin-top: 3%;
    /* margin-right: 20px; */
  }

  /* paragraps 01 */

  #paragraps-0 {
    font-size: 14px;
    line-height: 1.5em;
    text-align: center;
    /* margin-right: 20px; */
    margin-top: 1%;
  }

  .reservations{
    /* margin-left: 39.3rem; */
    text-align: center;
    /* margin-right: 20px; */
    margin-top: 5px;
  }

  #reservations{
    color: red;
  }

  #jpg01{
    width: 300px;
    height: 200px;
    margin-top: 2%;
    border: 6px solid white;
  }

  .jpg02 {
    margin-top: 70px;
    /* margin-left: 46%; */
    width: 111px;
    height: 42px;
    /* margin-right: 24px; */
    /* border: 1px solid white; */
  }

  .jpg02-container{
    display: grid;
    place-items: center;
  }
  
  .svgtool {
    width: 16px;
    height: 55px;
    transform: rotate(180deg);
    /* margin-left: 29.3rem; */
    /* margin-top: %; */
  }

  .svg-container{
    display: grid;
    place-items: center;
    margin-top: 2%;
  }

  #food{
    border: 6px solid white;
  }
  
  #kokteyl {
    width: 184px;
    height: 237px;
    /* margin-left: 30px; */
    border: 6px solid white;
  }
  
  .png03 {
    margin-top: 10%;
  }
  
  #menus {
    font-size: 16px;
    margin-top: 10%;
    /* margin-right: 20px; */
    text-align: center;
  }

  /* .menus-class{
    display: flex;
    justify-content: center;
  } */
  
  .tastingMenu {
    /* margin-left: 36.4rem; */
    font-size: 14px;
    border: 1px solid #323232;
    height: 29px;
    /* width: 135%; */
    text-align: center;
    /* line-height: 29px; */
    align-items: center !important;
    display: flex;
    justify-content: center
  }
  
  .tastingMenu a{
    text-decoration: none;
    color: black;
  }
  
  .tastingMenu a:hover{
    color: #8B0000;
  }
  
  .alacarte {
    /* margin-left: 36.4rem; */
    font-size: 14px;
    margin-top: 12px;
    border: 1px solid #323232;
    height: 29px;
    /* width: 135%; */
    text-align: center;
    /* line-height: 29px; */
    align-items: center !important;
    display: flex;
    justify-content: center
  }
  
  .alacarte a{
    text-decoration: none;
    color: black;
  }
  
  .alacarte a:hover{
    color: #8B0000;
  }
  
  .dessert {
    /* margin-left: 36.4rem; */
    margin-top: 12px;
    font-size: 14px;
    border: 1px solid #323232;
    height: 29px;
    /* width: 135%; */
    text-align: center;
    align-items: center !important;
    display: flex;
    justify-content: center
  }
  
  .dessert a{
    text-decoration: none;
    color: black;
  }
  
  .dessert a:hover{
    color: #8B0000;
  }
  
  .wine {
    /* margin-left: 36.4rem; */
    margin-top: 12px;
    font-size: 14px;
    border: 1px solid #323232;
    height: 29px;
    /* width: 135%; */
    text-align: center;
    align-items: center !important;
    display: flex;
    justify-content: center
  }
  
  .wine a{
    text-decoration: none;
    color: black;
  }
  
  .wine a:hover{
    color: #8B0000;
  }
  
  .bar {
    /* margin-left: 36.4rem; */
    margin-top: 10px;
    font-size: 14px;
    border: 1px solid #323232;
    height: 29px;
    /* width: 135%; */
    text-align: center;
    align-items: center !important;
    display: flex;
    justify-content: center
  }
  
  .bar a{
    text-decoration: none;
    color: black;
  }
  
  .bar a:hover{
    color: #8B0000;
  }

.kokteyl {
  margin-top: 3%;
}

.menu-list{
  list-style-type: none;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 25px;
  margin-top: -25%; */
  padding-left: 0px !important;
}

.paragrapseng{
  font-size: 12px;
  /* margin-top: -20px; */
}

/* Media quaries start */

@media screen and (min-width: 720px){
  #food{
    width: 100% !important;
    height: 250px;
  }
  #kokteyl{
    width: 100% !important;
    height: 250px;
  }
}

@media screen and (max-width: 720px){
  #food{
    width: 60% !important;
    height: 250px;
  }
  #kokteyl{
    width: 60% !important;
    height: 250px;
  }
}

@media screen and (min-width: 990px) {
  #food{
    width: 200px !important;
    height: 250px;
    margin-right: 0px !important;
  }
  #kokteyl{
    width: 200px !important;
    height: 250px;
    margin-left: 0px !important;
  }
  .menu-list {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    /* display: flex; */
  }
}

@media screen and (min-width: 721px) {
  #food{
    width: 200px !important;
    height: 250px;
  }
  #kokteyl{
    width: 200px !important;
    height: 250px;
  }
}

@media screen and (max-width: 721px) {
  #food{
    width: 200px !important;
    height: 250px;
  }
  #kokteyl{
    width: 200px !important;
    height: 250px;
  }
}
.contact .contact-img{
  justify-content: center !important;
}
.contact .contact-text .pr-1{
  justify-content: end !important;
  text-align: center;
}
.contact .contact-text .pr-2{
  justify-content: end !important;
  text-align: center;
}
.contact .contact-text2 .pr-1{
  justify-content: end !important;
  text-align: center;
}
.contact .contact-text2 .pr-2{
  justify-content: end !important;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contact .contact-text{
    justify-content: end !important;
  }
  .contact .contact-img{
    justify-content: center !important;
  }
  .contact .contact-text2{
    justify-content: start !important;
    text-align: center;
  }
}
/* Media quaries and */

/* Notpad start */

.notpad{
  background-color: white;
  width: 60%;
  margin-top: 10%;
}

#yeni-img-2{
  background-color: white ;
  margin-top: 25px;
}

#reservation-text{
  background-color: white;
  margin-top: 5%;
  font-size: 20px;
}

#reservation-text i{
  background-color: white;
}

#paragraps1{
  background-color: white;
  font-size: 13px;
  color: red;
}


#linktext1{
  font-size: 13px;
  color: red;
  background-color: white;
}

#linktext2{
  font-size: 13px;
  color: red;
  background-color: white;
  /* margin-top: -20px; */
}

#nokta{
  font-size: 12px;
  background-color: white;
  margin-top: 3%;
}

#paragraps2{
  background-color: white;
  font-size: 13px;
  color: red;
  margin-top: 3%;
}

#linktext3{
  background-color: white;
  font-size: 13px;
  color: red;
}

#linktext4{
  background-color: white;
  font-size: 13px;
  color: red;
}

@media screen and (max-width: 767px) {
  .notpad{
    width: 100%;
  }
}

@media screen and (max-width: 992px) {
  .notpad{
    width: 100%;
  }
}

#name{
  margin-top: 6%;
  /* margin-left: 2rem; */
  width: 80%;
  height: 2.3rem;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background-color: transparent;
  padding: 10px;
}

#email{
  margin-top: 5%;
  /* margin-left: 2rem; */
  width: 80%;
  height: 2.3rem;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background-color: transparent;
  padding: 10px;
}

#number{
  margin-top: 5%;
  /* margin-left: 2rem; */
  width: 80%;
  height: 2.3rem;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background-color: transparent;
  padding: 10px;
}

#date{
  margin-top: 5%;
  /* margin-left: 2rem; */
  width: 80%;
  height: 2.3rem;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background-color: transparent;
  padding: 10px;
}

#time{
  margin-top: 5%;
  /* margin-left: 2rem; */
  width: 80%;
  height: 2.5rem;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background-color: transparent;
  padding: 10px;
}

#kişi{
  margin-top: 5%;
  /* margin-left: 2rem; */
  width: 80%;
  height: 2.5rem;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background-color: transparent;
  padding: 10px;
}

#peng{
  font-size: 12px;
  text-align: center;
  background-color: white;
  margin-top: 4%;
}

#ptr{
  font-size: 12px;
  text-align: center;
  background-color: white;
  margin-top: -10px;
  font-style: italic;
}

#checkbox{
  /* margin-left: 11rem; */
  width: 20px;
  height: 20px;
  margin-top: 2%;
}

#checkbox-text{
  /* margin-left: 39%; */
  font-size: 12px;
  background-color: white;
  /* margin-top: -1.8rem; */
}

#send{
  /* margin-left: 10.6rem; */
  margin-top: 0.3rem;
  width:  33%;
  height: 36px;
  border: 1px solid black;
  font-size: 15px;
}

#send:hover{
  background-color: white;
  border: none;
}

#about{
  margin-top: 6%;
  background-color: white;
  font-size: 16px;
}

.materials{
  background-color: white;
  font-size: 14px;
  margin-top: 5%;
  /* list-style-type: none; */
  text-align: left;
}

.materials li{
  background-color: white;
}

.materials-tr{
  background-color: white;
  font-size: 14px;
  text-align: left;
  /* list-style-type: none; */
}

.materials-tr li{
  background-color: white;
}

.u-tt{
  background-color: white;
  color: red;
}

.pr-1{
  font-size: 14px;
  /* margin-left: 25%; */
  margin-top: 5%;
}

.pr-2{
  font-size: 14px;
  /* margin-left: 25%; */
  margin-top: 7%;
}

#img-sl{
  width: 15%;
  height: 20%;
  border: 6px solid white;
}

.img-sl{
  text-align: center;
  margin-top: -17%;
}

.contact {
  margin-top: 50px !important;
  padding: 0px 20%;
}


.contact img {
  width: 150px;
}








*{
  margin: 0;
  padding: 0;
  /* text-decoration: none; */
}

.title{
  margin-top: 50px;
  h2{
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: Arial;
    text-transform: uppercase;
    color: #d63031;
    
    span{
      display: block;
      color: darken(#d63031, 40%);
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
}

/*Carousel Gallery*/
.carousel-gallery{
  /* overflow-x: scroll; */
	margin: 50px 0;
  padding: 0 30px;
	.swiper-slide{
		a{
			display: block;
			width: 100%;
			height: 200px;
			border-radius: 4px;
			overflow: hidden;
			position: relative;

			-webkit-box-shadow: 3px 2px 20px 0px rgba(0,0,0, .2);
      -moz-box-shadow: 3px 2px 20px 0px rgba(0,0,0, .2);
      box-shadow: 3px 2px 20px 0px rgba(0,0,0, .2);

			&:hover{
				.image{
					.overlay{opacity: 1}
				}
			}

			.image{
				width: 100%;
				height: 100%;
				background-size: cover;
				background-position: center center;
				.overlay{
					width: 100%;
					height: 100%;
					background-color: rgba(20,20,20, .8);
					text-align: center;
					opacity: 0;
					
					-webkit-transition: all .2s linear; 
          -o-transition: all .2s linear; 
          transition: all .2s linear;

					em{
						color: #fff;
						font-size: 26px;
						position: relative;
            top: 50%; 
            -webkit-transform: translateY(-50%); 
            -ms-transform: translateY(-50%); 
            -o-transform: translateY(-50%); 
            transform: translateY(-50%);
            display: inline-block;
					}
				}
			}
		}
	}
  .swiper-container{
    overflow-x: hidden;
  }
	.swiper-pagination{
		position: relative;
		bottom: auto;
		text-align: center;
		margin-top: 25px;

		.swiper-pagination-bullet{
			-webkit-transition: all .2s linear; 
      -o-transition: all .2s linear; 
      transition: all .2s linear;

			&:hover{
				opacity: .7;
			}

			&.swiper-pagination-bullet-active{
				background-color: #d63031;
				transform: scale(1.1, 1.1)
			}
		}
	}
}
/*# Carousel Gallery*/