/* ____________________________________________________ 
                     Global
____________________________________________________ */
@import url('https://fonts.googleapis.com/css?family=Oxanium:400,500,600,700,800|Poppins:400,400i,500,500i,600,600i,700,700i&display=swap');
*{
  box-sizing: border-box;
  color: #fff;

}

body {
  background: #1c1421;
  color: #fff;
}
body.ar *{
  font-family: "El Messiri", sans-serif !important;
  font-weight: 700;
}
body.en *{
  font-family: 'Oxanium', cursive !important;
}
.el-messiri{
  font-family: "El Messiri", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
input{
  width: 100%;
  color: #1c1121;
}
button{
  border: none;
}

a{
  text-decoration: none !important;
  color: #fff;
}
/* ____________________________________________________ 
                      header
____________________________________________________ */
/*-------------------------------------------------
    [ ## Header ]
*/
.header-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  margin-top: 25px;
  background-color: transparent;
}

.header.active {
  transform: translateY(0%);
  position: fixed;
  top: 0;
  left: 0;
  animation-name: fadeInDown;
  animation-duration: 1s;
  transition: all 1s;
}

.header-section.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  /* background-image: -webkit-linear-gradient(30deg, #f7f8fa 0%, #f0f1fa 100%); */
  /* background-image: -ms-linear-gradient(30deg, #f7f8fa 0%, #f0f1fa 100%); */
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
}

@media (max-width:991px) {
  .navbar-nav{
    width: 50%;
  }
  .navbar-nav li {
    margin-bottom: 10px;
  }
}
.site-logo {
  max-height: 60px;
  max-width: 100px;
}
.site-logo img {
 width: 100%;
 height: 100%;
}
.navbar-nav li a {
  padding: 15px 23px;
  color: #1c1121;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #edeaea;
  display: block;
  line-height: 1;
  position: relative;
  z-index: 1;
  margin-inline-start: 10px;
}

.navbar-nav li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: skewX(-10deg);
  z-index: -1;
  right: 0;
  margin: 0 auto;
  border: 2px solid #f45334;
  transition: .5s;
}
.navbar-nav li a:hover::before{
  background-color: #f45334;
}
/* ____________________________________________________ 
                      SLIDER
____________________________________________________ */
.carousel-item{
  height: 640px;
  position: relative;
}
.carousel-item img{
  height: 100%;
}
@media (max-width:568px) {
  .carousel-item{
    height: 300px;
    margin-top: 70px;
  }
}
.carousel-control-next, .carousel-control-prev {
  top: 50%;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
}
.slider-info{
  position: absolute;
  z-index: 333;
  top: 30%;
  right: 10%;
}
.slider-info h1{
  font-size: 90px;
  text-transform: capitalize;

}
 
.slider-info h3{
  text-transform: capitalize;
  text-align: end;
}
@media (max-width: 591px) {
  .slider-info{
    top: 40%;
    right: 0;
    width: 100%;
    text-align: center;
  }
  .slider-info h1{
    font-size: 30px;
  }
  .slider-info h3{
    text-align: center;
  }
}
.carousel-item .anime-img{
  opacity: .2;
  position: absolute;
  z-index: 333;
  top: 25%;
  left: 10%;
  transform: translateX(50%);
  width: 450px;
  height: auto;
  filter: hue-rotate(-75deg);
  -webkit-animation-name: rotateme;
  animation-name: rotateme;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* ____________________________________________________ 
                      Products
____________________________________________________ */
.cards-products{
  padding: 20px;
}
.card-item{
  position: relative;
  overflow: hidden;
}
.card-item .image{
  width:  100%;
  height: 100%;
  overflow: hidden;
}
.card-item .image img{
  width:  100%;
  height: 310px;
}
.card-item .info {
  padding: 15px 5px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #edeaea;
  display: block;
  line-height: 1;
  position: relative;
  z-index: 1;
  width: 50%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  transition: .5s;
}
.card-item:hover .info{
  top: -66px;

}
.card-item .info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  transform: skewX(-10deg);
  z-index: -1;
  right: 0;
  margin: 0 auto;
  background-color: #f45334;
}
/* ____________________________________________________ 
                      News
____________________________________________________ */
.news-post-content {
	padding: 18px 15px;
  background-color: #1e1b20;
}
body.ar .news-post-content {
 text-align: end;
}
.news-meta ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
body.ar .news-meta ul{
  justify-content: end;
 }
.news-meta ul li {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	position: relative;
}
.news-meta ul li svg {
	margin-right: 5px;
  width: 14px;
  fill: #f45334;
}
.news-meta ul li::after {
	content: "/";
	margin: 0 10px;
	color: #fff;
}
.news-meta ul li:last-child::after {
	display: none;
}
.news-post-content h5 {
	font-size: 18px;
	margin-bottom: 10px;
	text-transform: capitalize;
}
.news-post-content p {
	margin-bottom: 0;
	font-style: italic;
  opacity: .8;
}
.news-post-content h5 a {
	display: inline-block;
}
.news-thumb img {
	width: 100%;
	box-shadow: 0px 5px 10px 0px rgba(11, 11, 11, 0.14);
  vertical-align: middle;
}
.news-post-content h4 {
	font-size: 22px;
	color: #fff;
	text-transform: uppercase;
	margin: 10px 0;
}
.news-post-content h4 a:hover {
	color: #f45334;
}
.news-meta ul li,
.news-meta ul li a {
	font-size: 12px;
	color: #fff;
	font-style: italic;
}
.news-meta ul {
	margin-bottom: 20px;
}
.news-post-content p {
	color: #fff;
	margin-bottom: 0;
}
/* ____________________________________________________ 
                      Footer
____________________________________________________ */
.footers{
  background-image: url(../../../images/footer-bg.jpg);
}
.footers-content ul *{
  color: #fff;
}
.footers-content ul li {
  justify-content: flex-start;
}
@media (max-width: 591px) {
  .footers-content ul li {
    justify-content: center;
  }
}
.footers-content ul li h4{
  line-height: 1.8;
}
.footers-content .title{
  position: relative;
  margin-bottom: 25px;
}
.footers-content .title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 30px;
  height: 3px;
  background-color: #f45334;
}
.footers-content svg{
  width: 20px;
  fill: #fff;
  margin-inline-end: 10px;
}
.footers-content ul li a{
  color: #fff;
  transition: .5s;
  line-height: 2;
}

.footers-content ul li a:hover{
  color: #f45334;
}
.copyright-wrap{
  border-top: 2px solid #f45334;
  padding: 20px 0;
}
.copyright-wrap .social {
  display: flex;
  justify-content: center;
  align-items: center;
}
.social svg{
  transition: .5s;
  width: 25px;

}
.social svg:hover{
  fill: #f45334;
}

/* ____________________________________________________ 
                      Auth
____________________________________________________ */
.login-section{
  background-size: 100%;
}
.login-section form{
  height: 100vh;
  display: grid;
  align-items: center;
  text-align: start;
}
.login-section form input{
  padding: 12px 20px;
}
.login-section .title{
  margin-bottom: 20px;
  color: #fff;
  font-weight: bold;
}

.input-item{
  position: relative;
}
.input-item svg{
  fill: #b7b7b7;
  width: 20px;
  position: absolute;
  left: 20px;
  top: 15px;
}
.register .input-item svg{
  left: 30px;
}
.btn-auth{
  background-color: #f45334;
  padding: 12px 42px;
  color: #fff !important;
  transition: .5s;
  opacity: .8;
}
.Or{
  position: relative;
}
.Or::after{
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  z-index: 55;
  background-color: #fff;
}
.btn-auth:hover{
  opacity: 1;
}
.register .nice-select{
  position: absolute;
  left: 15px;
  top: 0;
  width: auto;
  height: 100%;
  background-color: #f45334;
  border: 1px solid #f45334;
  padding:0 12px;
  border-radius: 0;
}
.register .nice-select::after{
border: none;
}
.nice-select .current{
color: #fff;
font-weight: bold;
}
.nice-select.open{
  width: 40%;
}
.submit-contain{
  align-items: center;
  display: flex;
}
@media (max-width: 591px) {
  .register {
    padding: 40px 0 80px 0;
  }
  .login-section .title{
    text-align: center;
  }
  .submit-contain{
    justify-content: center;
    display: grid;
  }
  .btn-auth{
    padding: 12px 20px;
  }
}
/* ____________________________________________________ 
                      scrollToTop
____________________________________________________ */
 .scrollToTop {
  position: fixed;
  bottom: 0;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4d5bed;
  box-shadow: 0px 10px 16px 0px rgba(77, 91, 237, 0.2);
  color: #4d5bed;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  z-index: 99;
  cursor: pointer;
  transition: all 1s;
  transform: translateY(100%);
}

.scrollToTop.active {
  bottom: 30px;
  transform: translateY(0%);
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.scrollToTop.active::before,
.scrollToTop.active::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-color: #f45334;
  opacity: 0.9;
  z-index: -10;
}

.scrollToTop:hover {
  color: white;
  box-shadow: 0px 10px 26px 0px rgba(77, 91, 237, 0.5);
}