@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');


:root{
  --red:#FF3838;
}

*{
  font-family: 'Tajawal';
  margin:0; padding:0;
  box-sizing: border-box;
  outline: none; border:none;
  text-decoration: none;
  text-transform: capitalize;
  transition:all .2s linear;
}

a:hover{
  text-decoration: none;
}

*::selection{
  background:var(--green);
  color:#fff;
}

html{
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body{
  background:#f7f7f7;
  direction: rtl;
 
}

 #page1{

  /* background: url(../img/intro-carousel/background.jpg); */
 background-color: #f7f7f7;
  background-attachment: fixed;
  background-position: center;
  overflow-x: hidden;

}
/* #page4{

  background: url(../img/intro-carousel/asian.png);
 
  background-attachment: fixed;
  background-position: center;
  
  background-size:cover;
} */

 

#page2{

  /* background: url(../img/intro-carousel/background.jpg); */
 
  background-attachment: fixed;
  background-position: center;
  overflow-x: hidden;

}



section{
  padding:2rem 1%;
 
}

.heading{
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  padding: 20px;
  color:#666;
}

.heading span{
  color:#FF3838;
}

.heading1{
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  padding: 5px;
  color:#666;
}

.heading1 span{
  color:#FF3838;
}

.heading2{
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  padding:61px;
  color:#666;
}

.heading2 span{
  color:#FF3838;
}
/*  */
.btn{
  display: table;
  padding:.8rem 3rem;
  border:.2rem solid var(--red);
  color:var(--red);
  cursor: pointer;
  font-size: 1.7rem;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
  text-align: right;
}

.btn::before{
  content: '';
  position: absolute;
  top:0; right: 0;
  width:0%;
  height:100%;
  background:var(--red);
  color: #FFf;
  transition: .3s linear;
  z-index: -1;
}

/* .btn:hover::before{
  width:100%;
  left: 0;
} */


.b .btn3{
  display:block;
  padding:.8rem 3rem;
  border:.2rem solid #FF3838;
  color:#FF3838;
  cursor: pointer;
  font-size: 1.7rem;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
  text-decoration: none;
}

/* 
.b .btn3:hover::before{
  width:100%;
  left: 0;
  text-decoration: none;
} */

.b .btn3:hover{
  color:#ffffff;
  background-color:#FF3838 ;
  border-color: #f7f7f7;
}




/* 
.btn-a:hover{
  color:#fff;
  background-color: #FF3838;
  border-color: white;


}




/*  */
/* .btn-a{
  display: block;
  padding: 15px 50px;
  font-size: 15px;
  border: 1px solid #FF3838;
  border-radius: 10px;
  background: #fff;
  color:#FF3838 ;
}  */


.btn-primary {
  color: #fff;
  background-color: #ffffff;
  border-color: #FF3838;
  size: 12px;
}



 
.btn2{
  display: inline-block;
  padding:.8rem 3rem;
  border:.2rem solid var(--white);
  color:var(--white);
  cursor: pointer;
  font-size: 1.7rem;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
  text-decoration: none;
}

.btn2::before{
  content: '';
  position: absolute;
  top:0; right: 0;
  width:0%;
  height:100%;
  background:var(--red);
  transition: .3s linear;
  z-index: -1;
  text-decoration: none;
}

.btn2:hover::before{
  width:100%;
  left: 0;
  text-decoration: none;
}

.btn2:hover{
  color:#fff;
}



/*  */
header{
  /* position:fixed; */
  top:0; left: 0; right:0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:#fff;
  padding:2rem 9%;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  height: 100px;
}

header .logo{
  font-size: 2.5rem;
  font-weight: bolder;
  color:#666;
}

header .logo i{
  padding-right: .5rem;
  color:var(--red);
}

header .navbar a{
  font-size: 2rem;
  margin-left: 2rem;
  color:#666;
}

header .navbar a:hover{
  color:var(--red);
}

#menu-bar{
  font-size: 3rem;
  cursor: pointer;
  color:#666;
  border:.1rem solid #666;
  border-radius: .3rem;
  padding:.5rem 1.5rem;
  display: none;
}








.home{
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
 
  align-items: left;
  background:url(../../upload/img/112.svg) no-repeat;
  background-size: contain;
  background-position: left;
}

.home .content{
  flex: 1 1 72rem;
  padding-top: 20.5rem;
}
 .content .btn{
  text-align: right;
  direction: rtl;
}

.home .image{
  flex: 60 5 100rem;
  border-radius: 20px;
 
}

.home .image img{
  width:60%;
  padding:1rem;
  /* animation:float 6s linear infinite; */
  border-radius: 18px;
  padding-top: 13rem;
 
}

@keyframes float{
  0%, 100%{
    transform: translateY(0rem);
  }
  50%{
    transform: translateY(3rem);
  }
}

.home .row .col-6 p{

  font-size: 1.7rem;
  color:#666;
  padding:1rem 0;
  text-align: right;
  }
.home .row .col-6 h3{

text-align: right;
font-size:45px;
font-weight:600;
  color:#333;
  text-align: right;
  padding-top: 17rem;
}


.home1{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  /* min-height: 60vh; */
  align-items: right;
  /* background:url(../../upload/img/blob.svg) no-repeat;
   background-size:contain;
  background-position: left; */
} 



.home1 .content1{
  flex:1 1 40rem;
  padding-top: 6.5rem;
}

.home1 .image1{
  flex:1 1 40rem;
}

.home1 .image1 img{
 position: relative;
  width:85%;
  padding:1rem;
  /* animation:float 3s linear infinite; */
  border-radius: 18px;
    text-align: right;
}

/* @keyframes float{
  0%, 100%{
    transform: translateY(0rem);
  }
  50%{
    transform: translateY(3rem);
  }
} */

.home1 .content1 h3{
  font-size: 33px;
  font-weight:600;
  color:#333;
  text-align: right;
}

.home1 .content1 p{
  font-size: 1.7rem;
  color:#666;
  padding:1rem 0;
  text-align: right;
} 
.home2{
  gap: 2px;
 
}
.home2 .content2 h3{
  text-align: center;
  font-size: 2.5rem;
  color:#666;
  font-weight: 600;
}

.home2 .content2 p{
  text-align: center;
  font-size: 16px;
  color:#333;
  font-weight: 700;
}


.home3{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  min-height: 40vh;

  direction: ltr;
  /* background:url(../../upload/img/blob.svg) no-repeat; */
   /* background-size:contain;
  background-position: left; */
} 

.home3 .content3{
  flex:1 1 40rem;
  padding-top: 6.5rem;
}
.home3 .image3{
  flex:1 1 40rem;
}

 .home3 .image3 img{
 position: relative;
  width:85%;
  padding:1rem;
  /* animation:float 3s linear infinite; */
    border-radius: 18px;
    text-align: right;
}  

.home3 .content3 h3{
  font-size: 33px;
  color:#333;
  text-align: right;
  font-weight: 600;
}

.home3 .content3 p{
  font-size: 16px;
  color:#666;
  padding:1rem 0;
  text-align: right;
} 

.cta__section .content .btn {
  text-align: center;
} 


     /* background:url(../../upload/img/arrangement-delicious-food-ingredients.jpg) ;   */

.speciality .box-container{
  
  
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;

 
}

.speciality .box-container .box{
  flex:1 1 30rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  border:.1rem solid rgba(0,0,0,.3);
  cursor: pointer;
  border-radius: .5rem;
  
 
}


/* .speciality .box-container .box .image{
  height:100%;
  width:100%;
  object-fit: cover;
  position: absolute;
  top:-100%; left:0;
} */

  .speciality .box-container .box .content{
  text-align: center;
  background: var(--green);
  padding:2rem;
 
   
} 

.speciality .box-container .box .content img{
  margin:1.5rem 0;
} 

.speciality .box-container .box .content h3{
  font-size: 28px;
  color:rgb(255, 255, 255);
}



.speciality .box-container .box .content p{
  font-size: 1.6rem;
  color:rgb(255, 255, 255);
  padding:1rem 0;
}

/* .speciality .box-container .box:hover .image{
  top:0;
} */

/* .speciality .box-container .box:hover .content{
  transform: translateY(100%);
} */

.popular .box-container{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;

}


.popular .box-container .box{
  padding:2rem;
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
  border: 2.1rem solid #ffffff;
  border-radius: .5rem;
  text-align: center;
  flex:1 1 30rem;
  position: relative;
}



.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
  display: inline-block;
  color: #FF3838;
  border: 2px solid #FF3838;
}


.popular .box-container .box img{
  height:25rem;
  object-fit: cover;
  width:100%;
  border-radius: .5rem;
 
}

.popular .box-container .box .price{
  position: absolute;
  top:3rem; left:3rem;
  background:#EF8845;
  color:#fff;
  font-size: 2rem;
  padding:.5rem 1rem;
  border-radius: .5rem;
}

.popular .box-container .box h3{
  color:#666;
  font-size: 2.5rem;
  padding-top: 1rem;
}

.popular .box-container .box .stars i{
  color:gold;
  font-size: 1.7rem;
  padding:1rem .1rem;
}


.steps{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  padding:1rem;
}

.steps .box{
  flex:1 1 25rem;
  padding:1rem;
  text-align: center;
}

.steps .box img{
  border-radius: 50%;
  border:1rem solid #fff;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.steps .box h3{
  font-size: 20px;
  color:#333;
  padding:1rem;
}





.gallery .box-container{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
 
}

.gallery .box-container .box{
  height:25rem;
  flex:1 1 30rem;
  border: 8px solid #FFf;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
 
}

.gallery .box-container .box img{
  height:100%;
  width:100%;
  object-fit: cover;
  

  
}

.gallery .box-container .box .content{
  position: absolute;
  top:-100%; left:0;
  height: 100%;
  width:100%;
  background:rgba(255,255,255,.9);
  padding:2rem;
  padding-top: 5rem;
  text-align: center;
 
}

.gallery .box-container .box .content h3{
  font-size: 2.5rem;
  color:#333;
}

.gallery .box-container .box .content p{
  font-size: 1.5rem;
  color:#666;
  padding:1rem 0;
}

/* .gallery .box-container .box:hover .content{
  top:0;
} */


 



.review .box-container{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
}

.review .box-container .box{
  text-align: center;
  padding:2rem;
  border:1rem solid #fff;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
  border-radius: .5rem;
  flex:1 1 30rem;
  background:#333;
  margin-top: 6rem;
}

.review .box-container .box img{
  height: 12rem;
  width:12rem;
  border-radius: 50%;
  border:1rem solid #fff;
  margin-top: -8rem;
  object-fit: cover;
}

.review .box-container .box h3{
  font-size: 2.5rem;
  color:#fff;
  padding:.5rem 0;
}

.review .box-container .box .stars i{
  font-size: 2rem;
  color:var(--red);
  padding:.5rem 0;
}

.review .box-container .box p{
  font-size: 1.5rem;
  color:#eee;
  padding:1rem 0;
}


/* .footer{
  background:#000;
  text-align: center;
  padding:5rem 1rem;
}

.footer .share{
  display: flex;
  gap:1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer .credit{
  padding:5rem 1rem;
  color:#fff;
  font-weight: normal;
  font-size: 2rem;
}

.footer .credit span{
  color:var(--red);
} */

#scroll-top{
    position: fixed;
    top: -120%;
    right: 2rem;
    padding: 0.5rem 0.5rem;
    font-size: 3rem;
    background: #FF3838;
    color: #fff;
    border-radius: 0.5rem;
    transition: 1s linear;
    z-index: 1000;
}

#scroll-top.active{
  top:calc(100% - 12rem)
}

.loader-container{
  position: fixed;
  top:0; left:0;
  z-index: 10000;
  background:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
  width:100%;
}

/* .loader-container.fade-out{
  top:-120%;
} */



.btn3{
  display: inline-block;
  padding:.8rem 3rem;
  border:.2rem solid #FF3838;
  color:#FF3838;
  cursor: pointer;
  font-size: 1.7rem;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
  text-decoration: none;
}

/* .btn3::before{
  content: '';
  position: absolute;
  top:0; right: 0;
  width:0%;
  height:100%;
  background:var(--green);
  transition: .3s linear;
  z-index: -1;
  text-decoration: none;
} */

.btn3:hover::before{
  width:100%;
  left: 0;
  text-decoration: none;
}

.btn3:hover{
  color:#ffffff;
  background-color:#FF3838 ;
}




/* media queries  */

@media(max-width:991px){

  html{
    font-size: 55%;
  }

  header{
    padding:2rem;
  }

  section{
    padding:2rem;
  }
.image1{
  max-width: 100%;

  text-align: center !important;
}
.image{
  max-width: 100%;

  text-align: center !important;
}

.image3{
  max-width: 100%;

  text-align: center !important;
}

.cta__section{
  max-width: 100%;

  text-align: center !important;
}

}

@media(max-width:768px){

  #menu-bar{
    display: initial;
  }

  header .navbar{
    position: absolute;
    top:100%; left: 0; right:0;
    background: #f7f7f7;
    border-top: .1rem solid rgba(0,0,0,.1);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  header .navbar.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }

  header .navbar a{
    margin: 1.5rem;
    padding:1.5rem;
    display: block;
    border:.2rem solid rgba(0,0,0,.1);
    border-left:.5rem solid var(--red);
    background:#fff;
  }

}

.but{
  text-align: center;

}



::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-thumb {
  background:var(--red);
  border-radius: 15px;
}
::-webkit-scrollbar-track {
  border-radius: 15px;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
}



.faq-section {
  background: #fdfdfd;
  /* min-height: 100vh; */
  padding: 10vh 0 0;
  text-align: center !important;
  padding-bottom: 100px;
}
.faq-title h2 {
position: relative;
margin-bottom: 45px;
display: inline-block;
font-weight: 600;
line-height: 1;
}
.faq-title h2::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 60px;
  height: 2px;
  background: #FF3838;
  bottom: -25px;
  margin-left: -30px;
}
.faq-title p {
padding: 0 190px;
margin-bottom: 10px;

}

.faq {
background: #FFFFFF;
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
border-radius: 4px;
text-align: center;
}

.faq .card {
border: none;
background: none;
border-bottom: 1px dashed #CEE1F8;
}

.faq .card .card-header {
padding: 0px;
border: none;
background: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.faq .card .card-header:hover {
  background: #FAC031;
  padding-left: 10px;
}
.faq .card .card-header .faq-title {
width: 100%;
text-align: right;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
font-weight: 400;
font-size: 15px;
letter-spacing: 1px;
color: #3B566E;
text-decoration: none !important;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
}

.faq .card .card-header .faq-title .badge {
display: inline-block;
width: 20px;
height: 20px;
line-height: 14px;
/* float: right; */
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
text-align: center;
background: #FF3838;
color: #fff;
font-size: 12px;
margin-right: 20px;
}

.faq .card .card-body {
padding: 30px;
padding-left: 35px;
padding-bottom: 16px;
font-weight: 400;
font-size: 16px;
color: #6F8BA4;
line-height: 28px;
letter-spacing: 1px;
border-top: 1px solid #F3F8FF;
}

.faq .card .card-body p {
margin-bottom: 14px;
text-align:right;
}

@media (max-width: 991px) {
.faq {
  margin-bottom: 30px;
}
.faq .card .card-header .faq-title {
  line-height: 26px;
  margin-top: 10px;
}
}
 /* carusel */

 /*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
#intro {
  width: 100%;
  /* height: 70vh; */
  overflow: hidden;
  position: relative;
  padding: 0px;
}

@media (max-height: 500px) {
  #intro {
    height: 150vh;
  }
}

/* #intro .carousel, #intro .carousel-inner, #intro .carousel-item, #intro .carousel-item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
} */
/* .intro-container{
  border: 5px solid #14A651;
  border-radius: 8px;
} */
#intro .carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
}
#intro .carousel-item::before {
  content: '';
  background-color: rgba(0, 0, 0, 0.7);
}
/* #intro .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 70px;
  left: 50px;
  right: 50px;
} */



#intro .carousel-fade {
  overflow: hidden;
}

#intro .carousel-fade .carousel-inner .carousel-item {
  transition-property: opacity;
}

#intro .carousel-fade .carousel-inner .carousel-item,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
  opacity: 0;
}

#intro .carousel-fade .carousel-inner .active,
#intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
#intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
  opacity: 1;
  transition: 0.5s;
}

#intro .carousel-fade .carousel-inner .carousel-item-next,
#intro .carousel-fade .carousel-inner .carousel-item-prev,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

#intro .carousel-control-prev, #intro .carousel-control-next {
  width: 10%;
}

@media (min-width: 1024px) {
  #intro .carousel-control-prev, #intro .carousel-control-next {
    width: 5%;
  }
}

#intro .carousel-control-next-icon, #intro .carousel-control-prev-icon {
  background: none;
  font-size: 32px;
  line-height: 1;
}

#intro .carousel-indicators li {
  cursor: pointer;
}
.carousel-indicators .active {
  opacity: 1;
  background-color: #FAC031;
  padding: 1px;
  border-radius: 14px;
}
#intro .btn-get-started {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: #4d4084;
}

#intro .btn-get-started:hover {
  background: #fff;
  color: #4d4084;
}

/*--------------------------------------------------------------
# some items
--------------------------------------------------------------*/
/*  */
.about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3rem;
}

.about .image {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
}

.about .image img {
  width: 100%;
}

.about .content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
}

.about .content .title {
  font-size: 2.5rem;
  text-transform: uppercase;
  color: #fff;
}

.about .content p {
  font-size: 1.5rem;
  line-height: 2;
  color: #aaa;
  padding: 2rem 0;
}

.about .content .icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.about .content .icons h3 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 16rem;
          flex: 1 1 16rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #fff;
}

.about .content .icons h3 i {
  padding-right: .5rem;
  color: #eacf4f;
}

.reviews .box-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
  gap: 2rem;
}

.reviews .box-container .box {
  text-align: center;
  padding: 2rem;
}

.reviews .box-container .box img {
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.reviews .box-container .box h3 {
  font-size: 2rem;
  text-transform: uppercase;
  color: #fff;
}

.reviews .box-container .box p {
  font-size: 1.4rem;
  line-height: 2;
  color: #aaa;
  padding: 1rem 0;
}

.reviews .box-container .box .stars {
  padding-top: .5rem;
}

.reviews .box-container .box .stars i {
  font-size: 1.7rem;
  color: #eacf4f;
}


/* aos */
[data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate {
  transition-delay: .15s;
}

.menu .box-container .box {
  text-align: center;
}
[data-aos^=fade][data-aos^=fade].aos-animate {
  opacity: 1;
  transform: translateZ(0);
}
[data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] {
  transition-delay: 0;
}
[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
  transition-timing-function: ease;
}
[data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] {
  transition-duration: .8s;
}
[data-aos^=fade][data-aos^=fade] {
  opacity: 1;
  transition-property: opacity,transform;
}
[data-aos=fade-up] {
  transform: translate3d(0,100px,0);
}

 .heading h3{
  font-size: 33px;
  color: 666;
font-weight: 600;
}

.menu .box-container .box .status{
  position: absolute;
  top:3rem; left:3rem;
  background:#FAC031;
  color:#fff;
  font-size: 2rem;
  padding:.5rem 1rem;
  border-radius: .5rem;
}
.menu .box-container .box .status2{
  position: absolute;
  top:3rem; left:3rem;
  background:#58cf40;
  color:#fff;
  font-size: 2rem;
  padding:.5rem 1rem;
  border-radius: .5rem;
}

.contact .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3rem;
}

.contact .row .map {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  width: 100%;
}

.contact .row .container1 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
}

.contact  .container1 .icons-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
     margin-bottom: 19rem;
    
    
}

.contact  .container1 .icons-container .icons {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 17rem;
          flex: 1 1 17rem;
  text-align: center;
}

.contact  .container1 .icons-container .icons i {
  height: 6rem;
  width: 6rem;
  line-height: 6rem;
  border-radius: 50%;
  background: #303030;
  color: #FF3838;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact .container1 .icons-container .icons h3 {
  padding: 1rem 0;
  font-size: 2rem;
  text-transform: uppercase;
  color: #666;
}

.contact  .container1 .icons-container .icons p {
  font-size: 1.5rem;
  line-height: 2;
  color: #aaa;
}

/* .contact .row .form form {
  text-align: center;
} */

/* .contact .row .form form .box {
  padding: 1.2rem 1.4rem;
  font-size: 1.6rem;
  color: #fff;
  background: none;
  border: 0.2rem solid rgba(255, 255, 255, 0.3);
  text-transform: none;
  width: 100%;
  margin: .7rem 0;
} */

/* .contact .row .form form .box:focus {
  border-color: #eacf4f;
} */

/* .contact .row .form form textarea {
  height: 15rem;
  resize: none;
} */


.footer_area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-box-shadow: 0 8px 48px 8px rgba(47, 91, 234, 0.175);
  box-shadow: 0 8px 48px 8px rgba(47, 91, 234, 0.175);
  padding:60px;
}

.h5, h5 {
  font-size: 18px;
  padding: 22px;
  color: white;
}


.footer_area .row {
  margin-left: -25px;
  margin-right: -25px;
}
.footer_area .row .col,
.footer_area .row .col-1,
.footer_area .row .col-10,
.footer_area .row .col-11,
.footer_area .row .col-12,
.footer_area .row .col-2,
.footer_area .row .col-3,
.footer_area .row .col-4,
.footer_area .row .col-5,
.footer_area .row .col-6,
.footer_area .row .col-7,
.footer_area .row .col-8,
.footer_area .row .col-9,
.footer_area .row .col-auto,
.footer_area .row .col-lg,
.footer_area .row .col-lg-1,
.footer_area .row .col-lg-10,
.footer_area .row .col-lg-11,
.footer_area .row .col-lg-12,
.footer_area .row .col-lg-2,
.footer_area .row .col-lg-3,
.footer_area .row .col-lg-4,
.footer_area .row .col-lg-5,
.footer_area .row .col-lg-6,
.footer_area .row .col-lg-7,
.footer_area .row .col-lg-8,
.footer_area .row .col-lg-9,
.footer_area .row .col-lg-auto,
.footer_area .row .col-md,
.footer_area .row .col-md-1,
.footer_area .row .col-md-10,
.footer_area .row .col-md-11,
.footer_area .row .col-md-12,
.footer_area .row .col-md-2,
.footer_area .row .col-md-3,
.footer_area .row .col-md-4,
.footer_area .row .col-md-5,
.footer_area .row .col-md-6,
.footer_area .row .col-md-7,
.footer_area .row .col-md-8,
.footer_area .row .col-md-9,
.footer_area .row .col-md-auto,
.footer_area .row .col-sm,
.footer_area .row .col-sm-1,
.footer_area .row .col-sm-10,
.footer_area .row .col-sm-11,
.footer_area .row .col-sm-12,
.footer_area .row .col-sm-2,
.footer_area .row .col-sm-3,
.footer_area .row .col-sm-4,
.footer_area .row .col-sm-5,
.footer_area .row .col-sm-6,
.footer_area .row .col-sm-7,
.footer_area .row .col-sm-8,
.footer_area .row .col-sm-9,
.footer_area .row .col-sm-auto,
.footer_area .row .col-xl,
.footer_area .row .col-xl-1,
.footer_area .row .col-xl-10,
.footer_area .row .col-xl-11,
.footer_area .row .col-xl-12,
.footer_area .row .col-xl-2,
.footer_area .row .col-xl-3,
.footer_area .row .col-xl-4,
.footer_area .row .col-xl-5,
.footer_area .row .col-xl-6,
.footer_area .row .col-xl-7,
.footer_area .row .col-xl-8,
.footer_area .row .col-xl-9,
.footer_area .row .col-xl-auto {
  padding-right: 25px;
  padding-left: 25px;
}

.single-footer-widget {
  position: relative;
  z-index: 1;
}
.single-footer-widget .copywrite-text a {
  color: #4D76B4;
  font-size: 18px;
}
.single-footer-widget .copywrite-text a:hover,
.single-footer-widget .copywrite-text a:focus {
  color: #4D76B4;
}
.single-footer-widget .widget-title {
  margin-bottom: 1.5rem;
}
.single-footer-widget .footer_menu li a {
  color: #ffffff;
  margin-bottom: 1rem;
  display: block;
  font-size: 1.3rem;
}
.single-footer-widget .footer_menu li a:hover,
.single-footer-widget .footer_menu li a:focus {
  color: #4D76B4;
}
.single-footer-widget .footer_menu li:last-child a {
  margin-bottom: 0;
}

.footer_social_area {
  position: relative;
  z-index: 1;
  padding: 10px;
  /* margin: 12px; */
}
.page4  .footer_social_area {
  position: relative;
  z-index: 1;
 background-color: #303030;
}
.footer_social_area a {
  border-radius: 50%;
  height: 40px;
  text-align: center;
  width: 40px;
  display: inline-block;
  background-color: #f5f5ff;
  line-height: 40px;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-right: 10px;
}
.footer_social_area a i {
  line-height: 36px;
}


.footer_social_area a:hover,
.footer_social_area a:focus {
  color: #646262;
}

@-webkit-keyframes bi-cycle {
  0% {
      left: 0;
  }
  100% {
      left: 100%;
  }
}

@keyframes bi-cycle {
  0% {
      left: 0;
  }
  100% {
      left: 100%;
  }
}
ol li, ul li {
  list-style: none;
}

ol, ul {
  margin: 0;
  padding: 0;
}

/* search */


.form-control
 {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 1.05rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out}

    .filter {
      display:block;
      flex-flow: row;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 20px;
  }
  .filter .form {
    width: 250px;
}
.text-right {
    text-align: right!important;
}
.ml-3, .mx-3 {
    margin-left: 1rem!important;
}
*:not(i) {
  font-family: 'Tajawal' !important;
}
label {
  display:block;
  margin-bottom: 0.5rem;
  font-weight: 300;
  color: #666;
  font-size: 22px;
  text-align: center;
}

select {
  word-wrap: normal;
}
option {
  font-weight: normal;
  display: block;
  white-space: nowrap;
  min-height: 1.2em;
  padding: 0px 2px 1px;
}

/* popup */
.modal-body{

  position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
    font-size: 16px;
 
    text-align: right;
}

.modal-header .h1{
font-size: 14px;
font-weight: 600;
text-align: center;
}
/* footer page items */

.p-4 {
    padding: 5.5rem!important;
}



#bn .btn{

  color: #FF3838;
  display: block;
}

#bn .btn.btn:hover{

  color: #ffffff;
  display: block;
}

.order{
  padding: 50px;
}

.order .row{
  padding:2rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  background:#fff;
  display: flex;
  flex-wrap: wrap;
  /* gap:1.5rem; */
  border-radius: .5rem;
  /* height: 450px; */
}

.order .row .video{
  flex:1 1 30rem;
}

.order .row .video .embed-responsive{
  height: 400px;
  width:100%;
  object-fit:inherit;
  border-radius: .5rem;
}

.order .row form{
  flex:1 1 50rem;
  padding:1rem;
}

.order .row form .inputBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.order .row form .inputBox input, .order .row form textarea{
  padding:1rem;
  margin:1rem 0;
  font-size: 1.7rem;
  color:#333;
  text-transform: none;
  border:.1rem solid rgba(0,0,0,.3);
  border-radius: .5rem;
  width:49%;
}

.order .row form textarea{
  width:100%;
  resize: none;
  height:15rem;
}

.order .row form .btn{
  background:none;
}

.order .row form .btn:hover{
  background:var(--red);
}

@media(max-width:450px){

  html{
    font-size: 50%;
  }

  .order .row form .inputBox input{
    width:100%;
  }

}




/*  */

#about2 .wrapper .row{
  justify-content: center;

} 

.wrapper p{
  /* height: 61px; */
  font-size: 18px;
  line-height: normal;
}


.wrapper{
  background-color: #ffffff;
}

.wrapper h1{
  font-family: 'Tajwal';
  font-size: 25px;
  /* margin-bottom: 80px; */
  padding: 60px;
  text-align: center;
  font-weight: bold;
 
}

.team{
  display: flex;
  justify-content: center;
  width: auto;
  text-align: center;
  flex-wrap: wrap;

}

.team .team_member {
  background: #ffffff;

  width: 325px;
  padding: 47px;
  line-height: 40px;
  color: #8e8b8b;
  position: relative;
  border-radius: 4px;
  /* box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%); */
  margin: 2px 20px;
}

.team .team_member h3{
  color: #000000a3;
  font-size: 24px;
  margin-top: 25px;
}

.team .team_member p.role{
  color: #ccc;
  margin: 12px 0;
  font-size: 12px;
  text-transform: uppercase;
}

 .team .team_member .team_img .status {
 position: absolute;
  top:3rem; left:3rem;
  background:#f44336b8;
  color:#fff;
  font-size: 1.5rem;
  padding:.5rem 1rem;
  border-radius: .5rem;
} 
.team .team_member .team_img .status2 {
  position: absolute;
  top:3rem; left:3rem;
  background:#58cf40ab;
  color:#fff;
  font-size: 1.5rem;
  padding:.5rem 1rem;
  border-radius: .5rem;
 } 

.team .team_member .team_img img{
  width: 100%;
  height: 250px;
  padding: 5px;
  border-radius: 61px;
}

 /* .btns:hover 
 ,.btns.active{

  background-color: #FF3838;
  color: white !important;

} */

.carousel-cell .product  .box a{
  display: inline-block;
  padding:.8rem 3rem;
  border:.2rem solid #FF3838;
  color:#FF3838;
  cursor: pointer;
  font-size: 1.7rem;
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
  text-decoration: none;
}

.carousel-cell .product .box a:hover{

  border:.2rem solid #FF3838;
  background-color: #FF3838; 
  color:#fff;

}

.carousel-cell .product .box a.active{
  background-color: #FF3838;
  color: white !important;

}




/* slide */
 /* .carousel-cell.is-selected {
 
   outline-offset: -1px; 
   groupCells: 100%;
   groupCells: true
 
} 

.flickity-viewport {
 transition: height 0.2s;
}

.product {

  width: 95%;
}  

 .product img {
 width: 100%;
 height: 18rem;
 object-fit: cover;
 width: 100%;
 border-radius: 0.5rem
} 


 .carousel-cell {
  width: calc( 100% / 4);
  
}
@media (min-width: 750px) {

 .container1 .box {
  padding: 1rem; 
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
  border: 2.1rem solid #ffffff;
  border-radius: 0.5rem;
  text-align: center;
  flex: 1 1 30rem;
  position: relative; 
   max-width: 95%;
 }  
 .box .btn {
  display: table;
  padding: 0.8rem 3rem;
  border: 0.2rem solid var(--red);
  color: var(--red);
  cursor: pointer;
  font-size: 12px;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
  text-align: right;
}


 
  @media (min-width: 768px){
 .container1, .container-lg, .container-md, .container-sm, .container-xl {
     max-width: 100%;
 }
 } 

 @media (min-width: 768px){
 .container1{
     max-width: 100%;
     
 } 
}

}
.nav-link {
  display: block;
  padding: 0.5rem 3rem;
  display: block;
  padding: 0.5rem 3rem;
  color: #fff;
  font-weight: 500;
}
.nav .nav-item a.active{
  color: #FF3838;
}
.nav .nav-item .nav-link:hover{
  color: #FF3838;
}
.dropdown-item{
  padding: 15px 35px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

 */

 



/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}


.main-carousel  .box {
  padding: 1rem; 
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
  border: 2.1rem solid #ffffff;
  border-radius: 0.5rem;
  text-align: center;
  flex: 1 1 30rem;
  position: relative; 
   max-width: 95%;
 }  
 .main-carousel .box .btn {
  display: table;
  padding: 0.8rem 3rem;
  border: 0.2rem solid var(--red);
  color: var(--red);
  cursor: pointer;
  font-size: 12px;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 1rem;
  text-align: right;
}
.main-carousel .product {

  width: 95%;
}  

.main-carousel  .product img {
 width: 100%;
 height: 18rem;
 object-fit: cover;
 width: 100%;
 border-radius: 0.5rem
} 



/*  */
.nav-link {
  display: block;
  padding: 0.5rem 3rem;
  display: block;
  padding: 0.5rem 3rem;
  color: #fff;
  font-weight: 500;
}
.nav .nav-item a.active{
  color: #FF3838;
}
.nav .nav-item .nav-link:hover{
  color: #FF3838;
}
.dropdown-item{
  padding: 15px 35px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.dropdown-item:hover{
 background-color: #FF3838;
 color: white;
}

.nav .nav-item .dropdown-menu a.active{
  background-color: #ff3838;
  display: block;
  text-align: center;
  font-size: 15px;
  color: #fff;
  padding: 15px 35px;
}

/*  */

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} */
.bod{
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #EFEFEF; */
}

.bod .swiper .btn:hover{
  background-color: var(--red);
  color: white;
}
.slide-container{
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-content{
  margin: 0 40px;
  overflow: hidden;
  border-radius: 25px;
}
.card{
  border-radius: 25px;
  background-color: #FFF;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
    border: 2.1rem solid #ffffff;
}
.image-content,
.card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
}
.image-content{
  position: relative;
  row-gap: 5px;
  padding: 5px 0;
}

.card-image{
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #FFF;
  padding: 3px;
}
.card-image .card-img{
    height: 315px;
    width: 100%;
  object-fit: cover;
  border-radius: 10%;
  /* border: 4px solid #4070F4; */
}

.swiper-pointer-events {

  padding: 22px !important;
}
.name{
  font-size: 22px;
  font-weight: 600;
  color: #766d6d;
}
.description{
  font-size: 14px;
  color: #707070;
  text-align: center;
}
.button{
  border: none;
  font-size: 16px;
  color: #FFF;
  padding: 8px 16px;
  background-color: #4070F4;
  border-radius: 6px;
  margin: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button:hover{
  background: #265DF2;
}

.swiper-navBtn{
  color: #FF3838 !important;
  transition: color 0.3s ease !important;
}
.swiper-navBtn:hover{
  color: #4070F4;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 35px;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color: #6E93f7;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: #FF3838 !important;
  font-size: 30px !important;
}

@media screen and (max-width: 768px) {
  .slide-content{
    margin: 0 10px;
  }
  .swiper-navBtn{
    display: none;
  }
}

/* loder */
.loader-container{
  position: fixed;
  top:0; left:0;
  z-index: 10000;
  background:rgba(255, 255, 255, 0.507);
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  height:100%;
  width:100%;
}

.loader-container.fade-out{
  top:-120%;

}
/* loder */