::selection {
  color: #00FEDE !important;
  background: darkgray !important;
}
#loading {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  margin:0;
  display:flex;
  align-items:center;
  justify-content: center;
  background: linear-gradient(to right, rgb(208 192 186) 0%, rgba(101,68,57,1) 100%);
  /*  background: linear-gradient(to right, rgb(207 198 198) 0%, rgba(92,92,92,1) 100%);*/
  overflow: hidden;
}
#loading ul{
   margin: 0;
   padding: 0;
   display: flex;
 }
 #loading ul li{
   list-style: none;
   color: #484848;
   font-size: 80px;
   letter-spacing: 15px;
   animation: lighting 2.4s linear infinite;
 }
 #loading ul li:nth-child(1){
  animation-delay: 0;
}
 #loading ul li:nth-child(2){
  animation-delay: 0.1s;
}
 #loading ul li:nth-child(3){
  animation-delay: 0.2s;
}
 #loading ul li:nth-child(4){
  animation-delay: 0.3s;
}
 #loading ul li:nth-child(5){
  animation-delay: 0.4s;
}
 #loading ul li:nth-child(6){
  animation-delay: 0.5s;
}
 #loading ul li:nth-child(7){
  animation-delay: 0.6s;
} 
#loading ul li:nth-child(8){
  animation-delay: 0.7s;
}
 #loading ul li:nth-child(9){
  animation-delay: 0.8s;
}
 #loading ul li:nth-child(10){
  animation-delay: 0.9s;
}
#loading ul li:nth-child(11){
  animation-delay: 1s;
}

 @keyframes lighting{
   0%{
     color: #484848;
     text-shadow: none;
   }
   90%{
     color: #484848;
     text-shadow: none;
   }
   100%{
     color: #fff;
     text-shadow: 0 0 10px #fff, 0 0 60px #28f5ff;
    }
  }
  img {border-radius: 20px;}

* {
  box-sizing: border-box;
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/IRANSansWeb_Bold.eot');
  src: url('../fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/IRANSansWeb_Medium.eot');
  src: url('../fonts/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/IRANSansWeb_Light.eot');
  src: url('../fonts/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/IRANSansWeb_UltraLight.eot');
  src: url('../fonts/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/IRANSansWeb.eot');
  src: url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('../fonts/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('../fonts/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/IRANSansWeb.ttf') format('truetype');
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
@media screen and (min-width: 250px) and (max-width: 766px) {
  .navbar {display: none;}
  header {
    min-height: 23% !important; 		
    max-height: 35% !important}
    .map-container-section{height: 300px !important;}
    .about {margin-top: -33% !important;}
  }

  .ui-menu {z-index: 99999; width: 100% !important; left: 0 !important;  line-height: 2.5; }
@media screen and (max-width: 1024px) {
  .navbar {display: none;}
  #mySidenav a{line-height: 3rem;}
  .carousel-indicators {display: none;}
  .card {
    display: block !important;
    margin: 0px !important;
  }
  p {
    line-height: 1.3rem !important;
    font-size: 70%;
  }
  h2{
    font-size: 150% !important;
  }
	.about {margin-right: 0% !important;}
  iframe {width: 100%;height: 200px !important;}
  .map-container-section{height: 400px !important;}
  #loading ul li {
    font-size: 180% ;
    letter-spacing: 8px ;
  }
  .no-mr img {margin-right: 0px !important;}
  .no-mt {margin-top: 0 !important;}
}

#search2 {
  padding: 10px;
  font-size: 17px;
  border: none;
  border-bottom: 3px solid #00FEDE;
  background: transparent;
  direction: rtl; 
  text-align: right; 
  max-width: 60% !important;
  margin: auto;
}

@media screen and (min-width:767px) and (max-width: 1025px){
  /*.ui-menu {z-index: 99999; width: 150px !important;}
  .ui-menu-item-wrapper {color: #00FEDE; direction: rtl; text-align: center !important;}
  .ui-menu-item {background-color: #343a40; direction: rtl; text-align: center !important;}*/
header {
  min-height: 23% !important; 		
  max-height: 50% !important;
  }
.menu-button {font-size: 48px !important;}
.closebtn {font-size: 48px !important;}
.about {margin-right: 0% !important;}
}

@media screen and (min-width : 1026px){
  .menu-button{ display: none; }
}


.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 2.5;
}
.ui-menu-item-wrapper {color: #00FEDE; direction: rtl; text-align: center;}
.ui-menu-item {background-color: #343a40; direction: rtl; text-align: center;font-size: 18px;  line-height: 2.5;}

body {
  overflow: initial;
  background: rgb(27,13,0);
  background: linear-gradient(270deg, rgba(27,13,0,1) 0%, rgba(41,23,5,1) 35%, rgba(51,32,13,1) 100%);
  font-family: IRANSans !important;
}

p{line-height: 1.5rem;}
.color-1{color: #00FEDE;}
.bg-1 {background-color: #00FEDE}
.color-2{color: #000000;}

.rtl {
  direction: rtl !important;
}
.ltr {
  direction: ltr !important;
}
.align-right{
  text-align: right !important;
}
.align-left {
  text-align: left !important;
}
a {text-decoration: none; color: white;}
a:hover {text-decoration: none; color: #00FEDE ;}
.navbar-nav a {
  color: #00FEDE;  /*D2691E*/
  text-decoration: none;
}/*DFC27A*/

.navbar-nav li {
  margin-right: 20px;
}
.dropdown-menu {
	right: 0;
    min-width: 420%;
	top: 100%
}
.sticky {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  color: white;
  height: 15%;
}
.card {
display: inline-block;
margin: 20px  10px ;
vertical-align: top;
border-radius: 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.owl-nav {
  color: #00FEDE;
  box-shadow: 2px 2px#28f5ff;
}
/*  Nav MOBILE  */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align:center;
  right: 0;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.menu-button{
  position: absolute;
  z-index: 998;
  float: right;
  color: black;
  margin-right: 25px;
  margin-top: 8px;
}


/* SEARCH BAR */

#search1 {
  width: 100px;
  height: 100px;
  /*margin: 40px 0;
  background-color: #242628;*/
  overflow: hidden;
  transition: all 0.5s ease;
  float: left;
  right: 70%;
  position: absolute ; 
}
#search1:before {
  content: "";
  display: block;
  width: 3px;
  height: 100%;
  position: relative;
  background-color: #00FEDE;
  transition: all 0.5s ease;
}
.becharkh {
  display: inline-block;
  transform: rotatey(180deg);
}
/*/*//*/*//**//*//*//**//*/**//*/*/
#search1.open {
  width: 420px;
  right: 70%;
  background-color: #242628;
  position: absolute ; 
}
#search1.open:before {
  height: 60px;
  margin: 20px 0 20px 30px;
  position: absolute;
}

.search-box {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border: none;
  text-align: right !important;
  background: transparent;
  color: #fff;
  padding: 20px 45px 20px 100px;
  font-size: 40px;
}
.search-box:focus {
  outline: none;
}

.search-button {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  cursor: pointer;
}

.search-icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 3px solid #00FEDE;
  display: block;
  position: relative;
  margin-left: 5px;
  transition: all 0.5s ease;
}
.search-icon:before {
  content: "";
  width: 3px;
  height: 15px;
  position: absolute;
  right: -2px;
  top: 30px;
  display: block;
  background-color: #00FEDE;
  transform: rotate(-45deg);
  transition: all 0.5s ease;
}
.search-icon:after {
  content: "";
  width: 3px;
  height: 15px;
  position: absolute;
  right: -12px;
  top: 40px;
  display: block;
  background-color: #00FEDE;
  transform: rotate(-45deg);
  transition: all 0.5s ease;
}
.open .search-icon {
  margin: 0;
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.open .search-icon:before {
  transform: rotate(52deg);
  right: 22px;
  top: 23px;
  height: 18px;
}
.open .search-icon:after {
  transform: rotate(-230deg);
  right: 22px;
  top: 13px;
  height: 18px;
}
/* SEARCH BAR */

.products {
  color: black;
  text-align: right;
}


section .xop-container div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.xop-container {
  display: flex;
  color: #fff;
  text-align: center;
  height: 40rem;
}

.xop-left {
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(255, 255, 225, 0.10)), url(../images/Coffee.jpg);
  background-size: cover;
  background-position: center;
  flex: 1;
  padding: 1rem;
  transition: all .2s ease-in-out;
text-transform: uppercase;
filter: grayscale(80%);
}

.xop-right {
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(164, 222, 102, 0.10)), url(../images/Make.jpg);
  background-size: cover;
  background-position: center;
  flex: 1;
  padding: 1rem;
  transition: all .2s ease-in-out;
text-transform: uppercase;
filter: hue-rotate(90deg);
}
.xop-left:hover, .xop-right:hover {
  transform: scale(0.95);
filter: invert(70%);
/*filter: hue-rotate(-90deg);*/
}
.xop-container h2 {
  letter-spacing: 2px;
  font-size: 3rem;
}
.xop-button {
  border-radius: 2px;
  color: #fff;
  background-color: #333;
  padding: 10px 6px;
  margin: 4% 1%;
  text-align: center;
  text-decoration: none;
letter-spacing: 1px;
  display: inline-block;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.5s;
  width: 60%;
}

.xop-button:hover {
  background: #fff;
  color: black !important;
}

@media only screen and (max-width: 600px) {
.xop-container {
  flex-direction: column;
}}



.owl-nav {
  position: absolute;
  bottom: 82%;
  width: 100%;
  font-size: 30px;
}
.owl-nav button.owl-next {
  position: absolute;
  left: 4px;
}
.owl-nav button.owl-next, .owl-nav button.owl-prev {
  background: 0 0;
      background-color: rgba(0, 0, 0, 0);
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
  width: 30px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  /*background-color: transparent;*/
  border-radius: 0;
  top: 5%;
}
.owl-nav button.owl-prev {
  position: absolute;
  right: 5px;
}


.btn {
  text-decoration: none;
  border: 1px solid #00FEDE;/*rgb(146, 148, 248)*/ /*rgba(88, 49, 10, 0.4)*/
  position: relative;
  overflow: hidden;
}

.btn:hover {
  box-shadow: 1px 1px 25px 10px #00FEDE;/*rgba(146, 148, 248, 0.4)*/ /*rgba(101,52,3,0.4)*/
}/*653403*/
/*rgba(146, 148, 248, 0.4)*/
.btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    #00FEDE,/*rgba(146, 148, 248, 0.4)*/ /*rgba(101,52,3,0.4)*/
    transparent
  );
  transition: all 650ms;
}

.btn:hover:before {
  left: 100%;
}

footer {
  background-color: #600303;
}
.tab-content{width:100%}