@import url("https://websiran.113247.ir.cdn.ir/css/bootstrap-icons.min.css");
:root{
  --nav-color-rgb: 254, 176, 98;
  --nav-color:#feb062;
  --back-menu:#808082;
  --modal_back:#232323c9;
}

@font-face {
  font-family: "Nian";
  src: url("./Nian-Regular.woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Nian";
  src: url("./Nian-SemiBold.woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Nian";
  src: url("./Nian-Bold.woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Nian";
  src: url("./Nian-ExtraBold.woff");
  font-weight: 900;
  font-style: normal;
}

* {
  font-family: "Nian";
}

h5 {
  margin-top: -20px;
}

body{
  background-color: black;
}
/* --------------------------------navbar */
nav {
  backdrop-filter: blur(10px)
}
.nav_img{
  width: 65px;
  height: 65px;
}
.nav_bg_color{
  background-color: black;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 1rem;
  box-shadow: 0 0 4px #d5d5d5d6;
}
.nav-link{
  font-size: 1.3rem;
}
.nav-link svg{
  width: 21px;
  height: 21px;
}
a.nav-link{
  padding-bottom: .7rem !important;
}
nav ul{
  gap: 1rem;
}
.text_yellow{
  color: var(--nav-color) !important;
}
nav button{
  background-color: black !important;
  
}
.navbar-toggler-icon{
  color: var(--nav-color) !important;
}
nav button i.bi::before{
  display: flex !important;
  align-content: center !important;
  justify-content: center !important;
  font-size: 30px;
}
@media (max-width:992px) {
  .navbar-collapse{
    margin-top: 1rem;
  }
  .nav-item{
    box-shadow: 0px 0px 6px 0px var(--nav-color);
  }
}
/* --------------------------------navbar */

.divider{
  display: flex;
  justify-content: center;
  width: 100%;
}
.divider img{
  width: 100%;
  object-fit: contain;
}
@media (min-width:768px) {
  .divider img{
    width: 50%;
    object-fit: contain;
  }
}


/* --------------------------------hero */
.hero_img{
  width: 100%;
  object-fit: cover;
  height: 80vh;
}
.absolute_hero_texts_container{
  position: relative;
  top: -50px;
  inset-inline: 0;
  min-height:100px;
  background-color: var(--nav-color);
  border-radius: 1rem;

}
.justify{
  text-align: justify;
}
/* -----------------------------restaurant */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  border-radius: 0.5rem;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.res_img{
  min-height: 150px;
  max-height: 300px;
  
  object-fit: cover;
  border-radius: 0.5rem;
}
.abs_button{
  position: absolute;
  bottom: 100%;
  inset-inline-end: 10px;
}
.abs_button button,
.abs_button a{
  border-radius: 0.5rem;
  padding: 0.25rem 1rem .5rem 1rem;
  background-color: #363636;
  color: whitesmoke;
  border: none;
  text-decoration: none;
}
/* ------------------------current_event */
#ex_event{
  margin-top: 4rem !important;
}
.event_img{
  text-align: center;
  border-radius: 0.5rem;
  font-size: 18px;
  background: #feb062a1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.abso_bot{
  position: absolute;
  inset-inline-end: 0;
}
.abso_bot button{
  border-radius: 0.5rem;
  padding: 0.25rem 1rem 0.5rem 1rem;
  background-color: rgb(39, 39, 39);
  border: none;
}
.abso_bot button svg{
  width: 35px;
  height: 40px;
}
/* ----------------------------footer */
.logo_des_con{
  background-color: var(--nav-color);
  color: whitesmoke;
  min-width: 300px;
  border-radius: 1rem;
}
.logo_edge{
  width: 100px;
  height: 100px;
  margin-block: 2rem;
}
.logo_edge img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.logo_texts{
  line-height: 1rem;
  padding-bottom: 2rem;
}
.addresses{
  list-style: none;

}
.address_img{
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.5rem;
  min-height: 300px;
}
.address_img img{
  object-fit: cover;
  width: 300px;
  height: 240px;
  border-radius: 1rem;
}
.gallery_con{
  max-width: 405px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.gallery_con img{
  width: 100%;
  height: 100px;
  object-fit: cover;
}

/*--------------------------------- page 2 : menu------------------------- */
.mt_6{
  margin-top: 5.5rem;
}
.grid_con{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  place-content: center;
}
@media (min-width:600px) {
  .grid_con{
    grid-template-columns:  1fr 1fr;
  }
}
@media (min-width:992px) {
  .grid_con{
    grid-template-columns:  1fr 1fr 1fr;
  }
}

/* .grid_item{
  
  border-radius: 0.5rem;
  font-size: 18px;
  background: var(--back-menu);
  display: flex;
  justify-content: center;
  color: whitesmoke;
  flex-direction: column;
} */

.grid_item {
  text-align: center;
  border-radius: 0.5rem;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.grid_img{
  min-height: 150px;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}
.icon_buying{
  width: 70px;
  height: 70px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  overflow: hidden;
  border-radius: 50%;
  background-color: #363636;
  margin: 1rem;
}
.icon_buying a{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon_buying a:hover{
  color: #363636;
}
.del{
  position: absolute;
  inset: 0;
  color: red;
  background: #fac7c7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s linear ;
}
.buy{
  color: rgb(0 151 22 / 86%);
  background: #daf4d3;
  pointer-events:none;
  opacity: 0;
  transition: opacity 0.3s linear ;
}
.del.active{
  opacity: 1;
  pointer-events: all;
}
.buy.active{
  opacity: 1;
  pointer-events: all;
}
.modal_con{
  position: fixed;
  inset: 0;
  background-color: var(--modal_back);
  display: grid;
  place-content: center;
  scale: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transition: scale 0.3s, opacity 0.3s,visibility 0.3s;
}
.modal_con.fire{
  visibility: visible;
  scale: 1;
  opacity: 1;
  pointer-events: all;
}
.modal_content{
  display: grid;
  grid-template-columns: 1fr;
  max-width: 400px;
  grid-template-areas: "header" 
  "img" 
  "texts" 
  "description" 
  "pricebut" ;
  margin-inline: 0.5rem;
  background-color: var(--back-menu);
  color: whitesmoke;
  border-radius: 1rem;
  position: relative;
  
}
@media (min-width:768px) {
  .modal_content{
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img header" "img texts" "description description" "pricebut pricebut";
    gap: 0.5rem;
  }
  .modal_content{
    max-width: 600px;
  }
}
.header{
grid-area: header;
}
.img_{
grid-area: img;
}
.img_ img{
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 1rem;
}
.texts{
  grid-area: texts;
}
.desc{
  grid-area: description;
}
.price{
  grid-area: pricebut;
}
.modal_btn{
  background-color: whitesmoke;
  color: black;
  border-radius: 0.5rem;
  padding: 0.3rem .7rem 0.5rem .7rem;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s color,0.3s background-color;
}
.modal_btn:hover{
  background-color: black;
  color: var(--nav-color);
}
.close_modal{
  position: absolute;
  top: 20px;
  inset-inline-end: 20px; 
  cursor: pointer;
}

/* ------------add--------------------newEdit */
.mySwiper_ex_ev .swiper-slide{
  height: auto;
}

.more_det {
  background-color: var(--nav-color) !important;
  border-color: var(--nav-color);
}

.sum_back {
  background-color: rgba(var(--nav-color-rgb), 0.3);
  border-radius: 10px;
}

.w-70vw {
  width: 70vw !important;
}

.h-70vh {
  height: 70vh !important;
}

.swiper-slide {
  background-position: center;
  background-size: contain;
  width: 300px;
  height: 300px;
}

.g_swiper-slide img {
  display: block;
  width: 100%;
}